How to create multiple elements by DOM in vanilla javascript?
Question
I have an HTML code like this:
<div> box 1 </div> // my whole code
And I want to create multi-element in div box 1 with inside img and text and after the div box 1 I want to create another div , img , and text .
The illustration I wanted is like this :
<div>
box 1 // my whole code before add those below
<img> icon.jpg </img>
<h1> some text </h1>
</div>
<div>
box 2
<img> icon.jpg </img>
<h1> some text </h1>
</div>
<div>
box 3
<img> icon.jpg </img>
<h1> some text </h1>
</div>
I make an event on the function to show the box and icon and some text inside the box,
here is my code:
const clickSearch = document.querySelector(".btn0").addEventListener("click",() => {
let ValuE = document.querySelector("#inPut").value
let putDiv = document.createElement("div")
putDiv.id = "flex-container-01"
putDiv.textContent = ValuE
let addD = document.querySelector(".flex-container")
addD.appendChild(putDiv)
let imgage = document.createElement("img")
image.src = "icon.gif"
let divDone = document.querySelector("#flex-container-01")
divDone.after(image)
})
but My code was added like this on HTML:
<div> box 1 </div> // my whole code
<img> icon.jpg </img>
<img> icon.jpg </img>
<img> icon.jpg </img>
<h1> text </h1>
<h1> text </h1>
<h1> text </h1>
<div> box 2 </div>
<div> box 3 </div>
<div> box 4 </div>
1 answers
solution1
1 ACCPTED 2018-10-08 12:37:35
Please check out this working example
The code in my example will generate the following HTML three times:
<div id="...">
box number
<img src="..."></img>
<h1>...</h1>
</div>
window.onload = ()=>{ let newDiv; let newImage; let newHeader; let newHeaderText; let newTextNode; let lineBreak; for(let i = 0; i < 3; i++) { // create the container div newDiv = document.createElement('div'); // create a new img element newImage = document.createElement('img'); // create a new header element newHeader = document.createElement('h1'); // create the text for the header element above newHeaderText = document.createTextNode('some text'); // some text based on your example newTextNode = document.createTextNode(`Box ${i + 1}`); // a line break (br) lineBreak = document.createElement('br'); // assign an id to the div newDiv.id = `flex-container-${i}`; // assign the source of the img element newImage.src = 'https://via.placeholder.com/32x32'; // put that "box-[num]" text inside the div newDiv.appendChild(newTextNode); // add in the line break // newDiv.appendChild(lineBreak); // put the img element inside the div newDiv.appendChild(newImage); // put the headerText inside the h1 element newHeader.appendChild(newHeaderText); // put the header element inside the container div newDiv.appendChild(newHeader); // put the newly created div inside the body of our page (or document) document.body.appendChild(newDiv); } };
<html> <body> </body> <html>
If you want this generation to happen on a click event, just put the code inside the proper event handler instead of window.onload :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.