如何在 vanilla javascript 中通过 DOM 创建多个元素？答案

【问题标题】：How to create multiple elements by DOM in vanilla javascript?如何在 vanilla javascript 中通过 DOM 创建多个元素？
【发布时间】：2019-03-12 23:54:27
【问题描述】：

我有一个这样的 HTML 代码：

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

我想在 img 和 text 和 div box 1 之后创建多元素 in 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>

【问题讨论】：

您的实际问题/问题是什么？您通过 class 或 id 查询的所有元素都不存在于您给定的 HTML“示例”中，因此请修复该问题并提供 proper minimal reproducible example.
我的问题是在上面的文字上，下面的代码是错误的，这就是为什么我需要一些帮助
再次，如果您需要我们的帮助，请给我们一个适当的示例。 “我想在 div 框 1 和 div 框 1 之后创建多元素” - 根据你决定什么进入该元素，以及什么在之后出现？
@misorude 我想添加div，里面是img和text，然后用img和text再次创建另一个div
@JaromandaX 看我想要的插图，我在 HTML 上的代码只有div box 1

标签： javascript html css dom dom-events

【解决方案1】：

请查看此working example

我示例中的代码将生成以下 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:)

【讨论】：