如何在 vanilla javascript 中通過 DOM 創建多個元素？

Question

我有一個像這樣的 HTML 代碼：

<div> box 1 </div> // my whole code

我想在DIV盒子1中創建多元素img和text和后div box 1我想創造另一個div ， img和text 。

我想要的插圖是這樣的：

<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>

我在函數上做了一個事件來顯示框和圖標以及框內的一些文本，

這是我的代碼：

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)
})

但是我的代碼在 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>

Answer 1

請查看此工作示例

我的示例中的代碼將生成以下 HTML 三次：

<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>

如果您希望此生成發生在單擊事件上，只需將代碼放在適當的事件處理程序中，而不是window.onload :)

如何在 vanilla javascript 中通過 DOM 創建多個元素？

問題描述

1 個解決方案

解決方案1
1 已采納 2018-10-08 12:37:35

如何在 vanilla javascript 中通過 DOM 創建多個元素？

問題描述

1 個解決方案

解決方案1 1 已采納 2018-10-08 12:37:35

解決方案1
1 已采納 2018-10-08 12:37:35