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並不僅僅侷限於添加列表