js中appendChild的用法

0X00写在最前

   之前学习js时看到的appChild方法都是用于列表，也就是添加li标签之类，类似这样

今天在mdn上看到了新的用法，令人耳目一新，记录一下与大家共同分享

0x01项目地址

https://roy-tian.github.io/mdn-examples/javascript/gallery/

0x02 appendChild方法分析

var thumbBar = document.querySelector('.thumb-bar');
for(var i = 1; i <= 5; i++) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', 'images/pic' + i + '.jpg');
  thumbBar.appendChild(newImage);
  newImage.onclick = on_newImage_click;
}

这段代码是遍历5张图片并将它们分别加入到thumb-bar容器中,这里先新建一个img标签，然后设定它的src，然后用appendChild加入到thumBar中，也就是thumb-bar容器中。也就是说appendChild并不仅仅局限于添加列表