js array有多长，就产生几个img tag

Question

需求是

依照array中有几个网址 就产生几个 img tag

例如:

abc = ['www.aa.com','www.bb.com']

产生
<img src="www.aa.com">
<img src="www.bb.com">

小弟js新手 不太知道如何写

我只会用for把所有array内容塞进去img的src

但要产生数个img tag就卡住了...

各位高手有方法吗

Answer 1

具体的实现可以这样。

let arrUrls = ['www.aa.com', 'www.bb.com'];
// 使用 fragment 作为中间体，将UI更新的次数降至最低的一次，减少消耗。
let fragment = document.createDocumentFragment();

let hImg = null
arrUrls.forEach((u) => {
  hImg = document.createElement('img');
  hImg.src = u;
  fragment.appendChild(hImg);
});

// 假设 document.body 是你需要将图片放置的父元素。
document.body.appendChild(fragment);

Answer 2

let abc = ['www.aa.com','www.bb.com'];

let imgs=abc.map((v)=> `<img src="${v}">`).join("");

const append = (el,html) =>{
     let   divTemp = document.createElement("div"),
           fragment = document.createDocumentFragment();
           divTemp.innerHTML= html;
           for (let node of divTemp.childNodes) {
               fragment.appendChild(node.cloneNode(true));
           }
      return el.appendChild(fragment);
};

append(document.body,imgs)

Answer 3

元素/tag是可以用js动态创建并插入到网页（document）中的，具体搜索document.createElement，但这样会影响性能，当然你初学的话可以不用管性能。然后还有第二种方法，可以使用js动态修改元素内包裹的内容，比如<div></div>中的内容，是可以用js动态修改的，你可以把里面的文本改为你想要的任何东西，包括img，具体搜索innerHTML。

如果继续深入的话，你会发现用js生成一个重复的内容挺麻烦的，所以有人搞出了“模板”这种东西，干这种事情会方便点，可以搜索vue，不过vue不是一种模板，只是它使用了一种模板的语法可以供你参考。