Is there any method/way in javascript to add a child node to list element dynamically?

Question

If I have an unordered list like

<ul id="list">
<li>Helo World-1</li>
<li>Helo World-2</li>
<li>Helo World-3</li>
</ul>

I want to add a sublist item to it dynamically. Is there any method in javascript to do that. How could I do it. edit I need an item at next level, i.e. a sub list of Helo World that I mentioned in OP too, something like as under. One more issue here is that I need the items to be a permanent part of my code.

 <ul id="list">
    <li>Helo World-1</li>
    <li>Helo World-2</li>
    <li>Helo World-3</li>
       <ul>
         <li>One</li>
         <li>Two</li>
      </ul>
 </ul>

How do you know to which <li> you have to add the sub items? — Arun P Johny
– Arun P Johny, Commented Nov 18, 2010 at 13:14
Have not thought that before.I think to 1st add these at the end, & once done. I Could then try to implement method Tim Down mentioned i.e. ul.insertBefore(li, document.getElementById("list_item_id")); — XCeptable
– XCeptable, Commented Nov 18, 2010 at 14:28

Tim Down · Accepted Answer · 2010-11-18 14:20:07Z

21

Using pure DOM methods:

var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Your list item text"));

To add the list item to the end of the list:

ul.appendChild(li);

To insert the list item between existing list items (note you'd have to give the existing list item an id in this example):

ul.insertBefore(li, document.getElementById("list_item_id"));

Update

If you want to add a nested list, you'll need to add it to a list item rather than directly inside the list in order for it to be valid:

var lis = ul.getElementsByTagName("li");

var lastLi = lis[lis.length - 1];

var nestedUl = document.createElement("ul");
var nestedLi = nestedUl.appendChild(document.createElement("li"));
nestedLi.appendChild(document.createTextNode("One"));

lastLi.appendChild(nestedUl);

edited Nov 18, 2010 at 14:20

answered Nov 18, 2010 at 13:05

Tim Down

326k76 gold badges461 silver badges546 bronze badges

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

6 Comments

user113716 Over a year ago

Nice insertBefore inclusion. +1

XCeptable Over a year ago

thanX Tim but same thing is here. Its adding item on 1st level, I need sub level item added.

XCeptable Over a year ago

thanX a Lot Tim. Can you kindly put all code together that is needed to add nested list item. Bec I am not sure how should I merge this code with one you put earlier as you used tagName property of element that is crated in code snippet.

Tim Down Over a year ago

@YuriKolovsky: Not in this situation: creating an element and all its children before adding it to the DOM is as good as you can do. A DocumentFragment would only help if you were inserting several sibling elements at the same point in the DOM.

Chris Ji Over a year ago

This does not work. last call lastLi.appendChild(nestedUl) will fail. jsfddler

|

score 1 · Accepted Answer · 2010-11-18 13:03:42Z

1

$('<li>...</li>').appendTo($('#list')); /* in jquery */

otherwise straight js

var mylist = document.getElementById('list');
mylist.appendChild(document.createElement('li'));

Note: if you need to set also text

var mylist = document.getElementById('list');
var newli  = document.createElement('li');

newli.innerHTML('Helo World ' + mylist.getElementsByTagName('li').length + 1);
mylist.appendChild(newli);

edited Nov 18, 2010 at 13:03

answered Nov 18, 2010 at 12:56

fcalderan

Comments

Arun P Johny · Accepted Answer · 2010-11-18 13:19:46Z

1

I've created a sample in jsfiddle

var el = document.getElementById("list");

var li = document.createElement("li");
li.innerHTML = "item";

el.appendChild(li);

You can go through the w3schools html dom reference to see how we can manipulate the html elements using javascript.

But I think the cleaner way will be to use a third party library like jQuery which will allow a much easier way to manipulate the dom.

ex: If use jQuery this will be as easy as

$("<li>...</li>").appendTo("#list")

EDIT: Based on your edit you can try this,

var ul = document.getElementById("list");
ul.children[2].innerHTML = "<ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>";

This will get the 3rd <li> of the <ul> and add a sublist to it

edited Nov 18, 2010 at 13:19

answered Nov 18, 2010 at 13:01

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

XCeptable Over a year ago

thanX Arun, what I need is a sublevel list to Helo world. I added detail to my question.

jerjer · Accepted Answer · 2010-11-18 12:58:53Z

-1

AFAIK, there is no equivalent HTML DOM object for list. Anyway you can use the innerHTML:

var list = document.getElementById("list");
var item = "<li>New Item</li>";
list.innerHTML += item;

answered Nov 18, 2010 at 12:58

jerjer

8,77634 silver badges36 bronze badges

1 Comment

Nick Craver Over a year ago

This is a very bad way to do it, .innerHTML will erase all event handlers and cause other issues.

Collectives™ on Stack Overflow

Is there any method/way in javascript to add a child node to list element dynamically?

4 Answers 4

Update

6 Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Update

6 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related