javascript - 如何通过 DOM 在 vanilla javascript 中创建多个元素?
问题描述
我有一个这样的 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>
解决方案
请查看这个工作示例
我的示例中的代码将生成以下 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
:)
推荐阅读
- ios - 您如何访问和保存集合视图中单个单元格的数据?
- php - Docker 上的 Wordpress 未加载正确的页面:Nginx 在 404 后发送 301 和 /$uri/index.php 未找到错误(没有这样的文件或目录)
- c - C:要求用户输入一个字符串。编写一个以字符串为参数的函数,如上所述加密消息并返回密文
- python - 根据条件为列名和单元格添加背景颜色
- c++ - 在 C++ 中使用 dynamic_cast 强制转换引用参数时出错
- python-3.x - 将数字随机分配到列表
- excel - 无法使用 Powershell 脚本访问 Excel 中的隐藏工作表选项卡
- python - 通过 pandas 删除基于多个条件的重复值
- opengl - OpenGL GLSL 将颜色作为整数发送到着色器以分解为 vec4 RGBA
- javascript - 存根:对具有不同主体的相同 URL 的存根 PUT 请求