How long the js array is, several img tag will be generated.

demand is

generate several img tag based on the number of URLs in array

for example:

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

generate

Novice js doesn"t know how to write

I can only use for to insert all array content into img"s src

but if you want to generate several img tag, it will get stuck.

do you masters have any ideas

Mar.04,2021

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)

element / tag can be dynamically created with js and inserted into the web page ( document ), specifically search for document.createElement , but this will affect performance, of course, if you are a beginner, you don't have to worry about performance. Then there is a second way, you can use js to dynamically modify the contents of the package within the element, such as

< / div > , which can be dynamically modified with js, and you can change the text inside to anything you want, including img , specifically search for innerHTML .

if you go further, you will find it troublesome to generate a duplicate content with js, so someone has come up with something like "template". It will be easier to do this. You can search vue , but vue is not a template, but it uses a template syntax for your reference.


The specific implementation of

can be like this.

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);
Menu