Question

We have had quite long chat here with rlemon about DOM manipulation. Basically the question is 'How can I change the UL-LI DOM with Javascript?' For example, suppose I want, instead of "<ul id='uids'><li>1</li><li>2</li></ul>", to display something like this "<ul><li><i>Hello 1, have a nice day!</i></li>...</ul>" — how can I do that just with DOM -manipulation?

I know this is simple question so instead of reinventing-the-wheel, I am happy with references.

Simple demo about DOM manipulation, can you do something like this?

Input

    <ul id="uid">
            <li>1</li>
            <li>2</li>
    </ul>

Output

    <ul id="uid">
            <li>Hello beautful lady 1!</li>
            <li>Hej gentleman 2.</li>
    </ul>

Perhaps useful for other newbies to get familiar with functional nature of JS

1. https://chat.stackoverflow.com/rooms/17/conversation/learn-javascript-videos

2. http://ejohn.org/apps/learn/

Answer 1

The short way, using innerHTML:

var lis = document.getElementById("uid").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++)
    lis[i].innerHTML = "<i>Hello "+lis[i].innerHTML+", have a nice day!</i>";

jsFidlde: http://jsfiddle.net/eZv4D/3/

The long way, with true DOM manipulation:

var lis = document.getElementById("uid").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++) { // Loop through all <li> elements
    // Create an <i> element to contain the text
    var el = document.createElement("i");

    // Add the start of the text to the <i>
    el.appendChild(document.createTextNode("Hello "));
    // Add everything in the <li> to the <i> (they are removed from the <li>)
    while(lis[i].firstChild)
        el.appendChild(lis[i].firstChild);
    // Add the end of the text to the <li>
    el.appendChild(document.createTextNode(", have a nice day!"));

    // Add the <i> to the <li>
    lis[i].appendChild(el);
}

​
​
jsFiddle: http://jsfiddle.net/eZv4D/2/