Adding a checkbox to an unordered list using JQuery

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');
 });

Answer 1

using prependTo() instead of appendTo() will do the trick

Answer 2

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");
 });

Answer 3

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.

Fiddle Demo