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

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

Previous: My pip cannot install any libraries

Next: Mini Program sets the timeout for a request

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu