using prependTo()
instead of appendTo()
will do the trick
Adding a checkbox to an unordered list using JQuery
-
25-06-2023 - |
Question
I have an unordered list (which can nest) such as:
<div id="checklist">
<ul>
<li>On Page SEO
<ul>
<li>My work <i>And note.</i>
<li>Your work <i>Blah</i>
</ul>
</li>
<li>Is this love?</li>
</ul>
</div>
On document ready, I want to add a checkbox to each <li>
tag BEFORE the text. I currently have the following which adds it AFTER the text:
$(document).ready(function () {
$('<input type="checkbox" value="1" />').appendTo('li');
});
Solution
OTHER TIPS
try this:
$(document).ready(function () {
$('div#checklist ul li').prepend('<input type="checkbox" value="1" />');
});
Or:
$(document).ready(function () {
$('<input type="checkbox" value="1" />').prependTo("li");
});
I think what you're trying to do is to append checkbox next to any li
that does not contain a ul
inside it, if so then you can do:
$('ul li').not(':has("ul")').append('<input type="checkbox" value="1" />');
You also need to close the <li>
using </li>
in your HTML markup.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow