Append text node to <li> using plain Javascript

Question

I have array that contains JSON data :

var phones = [
   {
     "age": 0,
     "id": "motorola-xoom-with-wi-fi",
     "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
     "name": "Motorola XOOM\u2122 with Wi-Fi",
     "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
   },

I wrote code to display that array as list ul li:

function createList_Task_2(){
    var arr = phones;
    var out = "<ul>";
    for(var i = 0; i < arr.length;i++){
        out+="<li>" + arr[i].age +"</li><br><li>" + arr[i].id +"</li><br><img src='" + arr[i].imageUrl  +"'/></li><br><li>"  + arr[i].name + "</li><br><li>" + arr[i].snippet + "</li>";
    }
    out+= "</ul>";
    document.getElementById("div1").innerHTML = out;
}

How can I achieve same result by using createTextNode and append it to li I tried this code but it's wrong I guess.

var arr = phones;
   var ulList = document.createElement("ul");
    ulList.setAttribute("id", "phonesList");

    var ulList = document.getElementById("phonesList");
    var newLi = document.createElement("li");
    for(var i= 0; i < arr.length;i++){
            var textAge =  document.createTextNode(arr[i].age);
            var textId = document.createTextNode(arr[i].id );
            var textImg = document.createTextNode(arr[i].imageUrl);
            var textName = document.createTextNode(arr[i].name);
            var textSnippet = document.createElement(arr[i].snippet);
            newLi.appendChild(textAge);
            newLi.appendChild(textId);
            newLi.appendChild(textImg);
            newLi.appendChild(textName);
            newLi.appendChild(textSnippet);
            ulList.appendChild(newLi);
        }

Answer 1

In your code var ulList = document.getElementById("phonesList"); will not return anything because even though you have create a new ul and set its ID that is not yet added to the document object.

var phones = [{
    "age": 0,
    "id": "motorola-xoom-with-wi-fi",
    "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
    "name": "Motorola XOOM\u2122 with Wi-Fi",
    "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
}]

var ulList = document.createElement("ul");
ulList.id = "phonesList";

//getElementById won't work because the ul is not yet added to the document, but we don't need to use it also since we have the reference to the create ul
//var ulList = document.getElementById("phonesList");

for (var i = 0; i < phones.length; i++) {
    //need to create a new li for each item in the array
    addStep(ulList, phones[i].age);
    addStep(ulList, phones[i].id);

    var li = document.createElement("li");
    var img = document.createElement("img");
    img.src = phones[i].imageUrl;
    li.appendChild(img);
    ulList.appendChild(li);

    addStep(ulList, phones[i].name);
    addStep(ulList, phones[i].snippet);
}

function addStep(ul, text) {
    var li = document.createElement("li");
    li.innerHTML = text;
    //ul.appendChild(document.createTextNode(text));
    ul.appendChild(li);
}

//add the ul to the body
document.body.appendChild(ulList)

Demo: Fiddle

Answer 2

Straight to the problem.

var item = document.createElement('li');
var text = document.createTextNode('list item content');
item.appendChild(text);
var ul = document.createElement('ul');
ul.appendChild(item);

// you missed this part
document.body.appendChild(ul);