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

So, use prependTo() method instead of appendTo

Bhojendra Rauniyar
– Bhojendra Rauniyar

2014-04-01 03:01:11 +00:00
Commented Apr 1, 2014 at 3:01 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Apr 1, 2014 at 3:01

Sam Miller · Accepted Answer · 2014-04-01 02:30:11Z

3

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

answered Apr 1, 2014 at 2:30

Sam Miller

1665 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Francis · Accepted Answer · 2014-04-01 02:35:03Z

0

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

answered Apr 1, 2014 at 2:35

Francis

6926 silver badges10 bronze badges

Comments

Felix · Accepted Answer · 2014-04-01 03:13:54Z

0

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

edited Apr 1, 2014 at 3:13

answered Apr 1, 2014 at 2:43

Felix

38.2k8 gold badges46 silver badges56 bronze badges

Collectives™ on Stack Overflow

Adding a checkbox to an unordered list using JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related