鍍金池/ 問答/HTML/ js array有多長，就產生幾個img tag

js array有多長，就產生幾個img tag

需求是

依照array中有幾個網(wǎng)址 就產生幾個 img tag

例如:

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

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

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

我只會用for把所有array內容塞進去img的src

但要產生數(shù)個img tag就卡住了...

各位高手有方法嗎

回答
編輯回答
扯機薄

元素/tag是可以用js動態(tài)創(chuàng)建并插入到網(wǎng)頁（document）中的，具體搜索document.createElement，但這樣會影響性能，當然你初學的話可以不用管性能。然后還有第二種方法，可以使用js動態(tài)修改元素內包裹的內容，比如<div></div>中的內容，是可以用js動態(tài)修改的，你可以把里面的文本改為你想要的任何東西，包括img，具體搜索innerHTML。

如果繼續(xù)深入的話，你會發(fā)現(xiàn)用js生成一個重復的內容挺麻煩的，所以有人搞出了“模板”這種東西，干這種事情會方便點，可以搜索vue，不過vue不是一種模板，只是它使用了一種模板的語法可以供你參考。

2018年1月11日 05:07
編輯回答
凹凸曼

具體的實現(xiàn)可以這樣。

let arrUrls = ['www.aa.com', 'www.bb.com'];
// 使用 fragment 作為中間體，將UI更新的次數(shù)降至最低的一次，減少消耗。
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);
2017年1月14日 07:41
編輯回答
哚蕾咪
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)
2017年10月5日 15:42