JS中如何给所有img增加外部元素？

Question

例如：
根据ajax传回的数据中有三张图

var img = document.querySelectorAll("img");
for(var i = 0; i < img.length; i++) {
}

以上获取所有img标签，请问如何循环给所有img标签外添加div？变为

<div><img src="图片地址"></div>

Answer 1

这个不复杂吧，但是有几个细节需要注意。
基本思路就是：
循环列表，在img前面加一个div，div通过appendChild将img加到自己的子节点中。

需要注意的点是，通过querySelectorAll得到的NodeList是实时更新的，当前操作倒是不影响（因为不会改变NodeList元素的顺序），但是最好不要在加入其它复杂的dom操作。

代码大致如下吧。

imgList = document.querySelectorAll('img')
imgList.forEach(img => {
  let div = document.createElement('div')
  let parentNode = img.parentNode
  div.appendChild(img)
  parentNode.appendChild(div)
})

在当前页面执行这段代码，你就会发现你的头像外部包了一个div:

Answer 2

img.forEach(function(item){
      var wrap = document.createElement('div');
      var parent = item.parentElement;
      
      parent.insertBefore(wrap, item);

      wrap.appendChild(item);
})

Answer 3

var img = document.querySelectorAll("img");
for(var i = 0; i < img.length; i++) {
    img[i].outerHTML=`<div>${img[i].outerHTML}</div>`;

}