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并不仅仅局限于添加列表

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章