Question

我有包含JSON数据的数组：

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)."
   },

我编写代码将该数组显示为列表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;
}

如何通过使用createTextNode并将其附加到li来实现相同的结果我尝试过这段代码，但我认为这是错误的。

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

直接解决问题。

＆＃13;

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

＆＃13;

Answer 2

在您的代码var ulList = document.getElementById("phonesList");中不会返回任何内容，因为即使您创建了新的ul并将其ID设置为尚未添加到文档对象中。

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)

演示：Fiddle

使用普通Javascript将文本节点附加到<li>

2 个答案: