仅使用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);