僅使用javascript動態添加div

Question

以下是我的代碼的一部分。

我想僅使用JavaScript動態創建div元素;我是第一次使用來自不同網站的代碼和來自這裏的問題。

但是這個循環似乎什麼都不做。

所有的類都存在於CSS中。請發現錯誤，並歡迎任何其他建議。

var i; 
 

 
for (i = 0; i < 20; i++) { 
 
    var main = document.getElementById('show'); 
 

 
    var div1 = document.createElement('div'); 
 
    div1.id = 's' + i; 
 
    div1.className = 'perschoolcontainer'; 
 
    var link2 = document.createElement('a'); 
 
    link2.setAttribute('href', 'abcd.jpg'); 
 

 
    var image3 = document.createElement('img'); 
 
    image3.id = 'dp'; 
 
    image3.src = 'davsv.jpg'; 
 
    image3.class = 'dp'; 
 

 
    var p4 = document.createElement('p'); 
 
    p4.id = 'sname'; 
 
    p4.class = 'sname'; 
 

 
    var p5 = document.createElement('p'); 
 
    p5.id = 'location'; 
 
    p5.class = 'location'; 
 

 
    var t1 = document.createTextNode('abc'); 
 
    var t2 = document.createTextNode('def'); 
 

 
    p5.appendChild(t2); 
 
    p4.appendChild(t1); 
 
    link2.appendChild(image3); 
 
    link2.appendChild(p4); 
 
    link2.appendChild(p5); 
 
    div1.appendChild(link2); 
 

 
    main.innerHTML.appendChild(div1); 
 
}

<div id="s1" class="perschoolcontainer"> 
 
    <a href="davsv.jpg"> 
 
    <img id="dp" class="dp" src="davsv.jpg" alt="DAV"> 
 
    <div id="details" class="details"> 
 
     <p id="sname" class="sname">DAV</p> 
 
     <p id="location" class="location">Sv</p> 
 
    </div> 
 
    </a> 
 
</div>

Answer 1

innerHTML沒有appendChild方法。變化：

main.innerHTML.appendChild(div1); 

到：

main.appendChild(div1);