gpt4 book ai didi

javascript - 如何使用具有不同ID的附加子项动态添加多个div?

转载 作者:太空宇宙 更新时间:2023-11-04 01:13:37 25 4
gpt4 key购买 nike

我试图在点击添加按钮时添加 div。单击添加按钮时,将使用类名ui模态和id 测试。对于创建的多个 div,将添加相同的 id。我需要为每个额外添加的 div 提供不同的 ID。

如何使用 append child 生成不同的 ID。

我还需要获取具有父子节点和兄弟节点的树结构。

function add_div(){
var div = document.createElement('div');
document.body.appendChild(div);
div.className = 'ui-modal';
div.id = 'test';
div.innerHTML = '<span class="msg">Hello world.</span>';
div.textContent = 'Hello world.';
}
 .ui-modal{
width: 200px;
height: 50px;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<input type="button" value="ADD" onclick="add_div();">
<input type="button" value="DELETE">


</div>

</body>
</html>

运行上面的代码并检查后,我看到每个额外添加的 div 都具有相同的 ID。

如何生成单独的ID?

最佳答案

您可以在 add_div 之外声明一个计数器,并在每次创建 div 时将其附加到 id

var counter = 1;

function add_div(){
var div = document.createElement('div');
document.body.appendChild(div);

div.className = 'ui-modal';
div.id = 'test' + (counter++);
div.innerHTML = '<span class="msg">Hello world.</span>';
div.textContent = 'Hello world.';
}
.ui-modal{
width: 200px;
height: 50px;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<input type="button" value="ADD" onclick="add_div();">
<input type="button" value="DELETE">
</div>
</body>
</html>

关于javascript - 如何使用具有不同ID的附加子项动态添加多个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50691834/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com