JavaScript - Wie mehrere LI in 1 UL mit DOM

Question

setzen Ich versuche, mehrere li in 1 mit DOM setzen, aber es funktioniert nicht, ich habe versucht verschiedene Möglichkeiten immer noch nicht funktioniert. Ich habe diesen Code so weit

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

Diese beiden Linien können nicht innerhalb der Schleife sein. Setzen Sie sie über for:

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

Answer 2

Versuch dies zu tun:

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

Ihre erwartete Um das zu erreichen, ich habe unter Option verwendet, die li jedes Elements schaffen

 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

Ihr Code funktioniert in jsfiddle:

jsfiddle.net/9yq1p1zu/

Vielleicht, ich Sie nicht bekommen.