Question

我尝试使用DOM将多个li放入1 ul但是它不起作用，我尝试了不同的方法仍然无法正常工作。到目前为止我得到了这段代码

var list = [
    {
        id: 1,
        title: "Dope",
        img: "pic/dope.jpg",
        link: "dope.html"
    },
    {
        id: 2,
        title: "The Do Over",
        img: "pic/The_Do-Over.png",
        link: "The_Do-Over.html"
    },
    {
        id: 3,
        title: "Deadpool",
        img: "pic/Deadpool.jpg",
        link: "Deadpool.html"
    },
    {
        id: 4,
        title: "Johnny English Reborn",
        img: "pic/johnny_english_reborn.jpg",
        link: "johnny_english_reborn.html"
    }
];

var input = document.getElementById("input");

for (var i = 0; i <list.length; i++) {
    var ul = document.createElement('ul');
    var li = document.createElement('li');
    var a = document.createElement("a");
    var img = document.createElement("img");
    var p = document.createElement('p');

    p.title = list[i].title;
    ul.appendChild(p);
    img.src = list[i].img;
    img.title = list[i].title;

    a.href = list[i].link;    
    a.appendChild(img);

    li.id = list[i].id;
    li.appendChild(a);
    ul.appendChild(li);
    console.log(ul);
    input.appendChild(ul);
};


<div id="input" >

</div>

Answer 1

这两行不能在循环内部。将它们置于for之上：

var ul = document.createElement('ul');
input.appendChild(ul);

Answer 2

尝试这样做：

var list = [
    {
        id: 1,
        title: "Dope",
        img: "pic/dope.jpg",
        link: "dope.html"
    },
    {
        id: 2,
        title: "The Do Over",
        img: "pic/The_Do-Over.png",
        link: "The_Do-Over.html"
    },
    {
        id: 3,
        title: "Deadpool",
        img: "pic/Deadpool.jpg",
        link: "Deadpool.html"
    },
    {
        id: 4,
        title: "Johnny English Reborn",
        img: "pic/johnny_english_reborn.jpg",
        link: "johnny_english_reborn.html"
    }
];

var input = document.getElementById("input");

function createList() {

    var ul = document.createElement('ul');

    for (var i = 0; i <list.length; i++) {


        //create li
        var li = document.createElement('li');
        li.id = list[i].id;

        //create paragraph
        var p = document.createElement('p');
        p.title = list[i].title;
        li.appendChild(p);

        //create image
        var img = document.createElement("img");
        img.src = list[i].img;
        img.title = list[i].title;

        //create href
        var a = document.createElement("a");
        a.href = list[i].link;    
        a.appendChild(img);
        li.appendChild(a);

        //append this li to the ul
        ul.appendChild(li);

    }

    //outside the loop, append once the ul to the wrapper
    input.appendChild(ul);


};

createList();

Answer 3

为了实现您的预期，我使用了以下选项，它将创建每个元素的li

      var list = [
          {
              id: 1,
              title: "Dope",
              img: "pic/dope.jpg",
              link: "dope.html"
          },
          {
              id: 2,
              title: "The Do Over",
              img: "pic/The_Do-Over.png",
              link: "The_Do-Over.html"
          },
          {
              id: 3,
              title: "Deadpool",
              img: "pic/Deadpool.jpg",
              link: "Deadpool.html"
          },
          {
              id: 4,
              title: "Johnny English Reborn",
              img: "pic/johnny_english_reborn.jpg",
              link: "johnny_english_reborn.html"
          }
      ];

      var input = document.getElementById("input");
      var x = Object.keys(list[0]);
      console.log(list[0][x[1]])
      for (var i = 0; i <list.length; i++) {
        for (var j = 0; j <x.length; j++){
        console.log(list[i][x[j]])  
        var ul = document.createElement('ul');
          var li = document.createElement('li');
          var a = document.createElement("a");
          var img = document.createElement("img");
          var p = document.createElement('p');

          p.title = list[i][x[j]];
          ul.appendChild(p);
          img.src = list[i][x[j]];
          img.title = list[i][x[j]];

          a.href = list[i][x[j]];    
          a.appendChild(img);

          li.id = list[i][x[j]];
          li.appendChild(a);
          ul.appendChild(li);
          console.log(ul);
          input.appendChild(ul);
        }
      };

Codepen - http://codepen.io/nagasai/pen/GqqPOp

Answer 4

您的代码适用于jsfiddle：

jsfiddle.net/9yq1p1zu /

也许，我不能帮你。

JavaScript - 如何使用DOM将多个LI放入1 UL

4 个答案: