How to append checkbox,textnode,in List item

Question

I want to create a list with check box dynamically. For that i created list item, check box,text node dynamically.

My problem is, I want to append checkbox and textnode inside List item. How to do this?

In Script:

    var name=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
 var list = document.createElement( "li" );
 var cb = document.createElement( "input" );
 cb.type = "checkbox";
 cb.id = "c1";
 cb.value = name;
 cb.checked = false;
 var text = document.createTextNode( name );

In Body:

<ul id="list" >
    </ul>

I want to do like,

<li><input type="checkbox">Tamil</li>

dynamically from javascript.

For that i tried like,

document.getElementById( 'list' ).appendChild(list);
document.getElementById( 'list' ).appendChild(cb);
document.getElementById( 'list' ).appendChild(text);

But it is not appended in li.

How to append these correctly?

What browser are we talking about? And can you use jQuery?

Babiker
– Babiker

2011-06-21 05:47:37 +00:00
Commented Jun 21, 2011 at 5:47 — Babiker
– Babiker, Commented Jun 21, 2011 at 5:47

Nivas · Accepted Answer · 2011-06-21 05:59:33Z

3

You have to create a checkbox dynamically, create a list item (<li>) dynamically, append the checkbox to the <li> and the <li> to the UL

Something Like:

var name = "Test"; //or whatever you want, from another textbox for instance

//Create a new <li> dynamically
var newLi = document.createElement('li');


//Create checkbox dynamically       
var checkBox = cb = document.createElement( "input" );
cb.type = "checkbox";
cb.id = "c1";
cb.value = name;
cb.checked = false;

//Append the checkbox to the li
newLi.appendChild(cb);


//Create the text node after the the checkbox
var text = document.createTextNode(name);
//Append the text node to the <li>
newLi.appendChild(text);

//Append the <li> to the <ul>
var ul = document.getElementById("test");
ul.appendChild(newLi);

You started correct, then forgot to create a new <li>

answered Jun 21, 2011 at 5:59

Nivas

18.4k4 gold badges65 silver badges76 bronze badges

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

Comments

james li · Accepted Answer · 2011-06-21 05:56:31Z

1

var name=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
 var list = document.createElement( "li" );
 var cb = document.createElement( "input" );
 cb.type = "checkbox";
 cb.id = "c1";
 cb.value = name;
 cb.checked = false;
 // then
list.appendChild(cb);
list.innerHTML+=name;//or if you want,create the textnode 'text' and appendChild again
var lists=document.getElementById('list');
lists.appendChild(list);

answered Jun 21, 2011 at 5:56

james li

1741 silver badge6 bronze badges

Comments

Billy Moon · Accepted Answer · 2011-06-21 05:56:27Z

0

I would recommend using jQuery or another similar library. This will help to ensure cross browser compatibilty, and simplify your coding. With jQuery you can do it like this...

// create something, and appendTo something else
$('<li />').appendTo('body')
// select something, and append something else to it
$('li').append( $('<input />').attr({type:'checkbox'}) )

answered Jun 21, 2011 at 5:56

Billy Moon

58.9k27 gold badges148 silver badges245 bronze badges

Collectives™ on Stack Overflow

How to append checkbox,textnode,in List item

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