Question

我有这样的HTML代码

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

我想在in div box 1和img内部创建多元素text，在div box 1之后，我想创建另一个div，{{ 1}}和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上添加的：

but

Answer 1

请查看此working example

我的示例中的代码将生成3次以下HTML：

ExpandConstant('{cm:FOO}')

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

如果您希望这一代发生在click事件上，只需将代码放在适当的事件处理程序中，而不要放在<html> <body> </body> <html>中：）

如何在香草JavaScript中通过DOM创建多个元素？

1 个答案: