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

我正在尝试使用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>

最佳答案

这两行不能在循环内。将它们放在for上方：

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