Question

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

如何使用追加子项生成不同的ID。

此外，我需要使用父子节点和兄弟节点获取树结构。

＆＃13;

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.';
}

＆＃13;

 .ui-modal{
    	width: 200px;
    	height: 50px;
    	border: 1px solid red;
    }

＆＃13;

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

＆＃13;

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

如何生成单独的ID？

Answer 1

您可以在add_div之外声明一个计数器，并在每次创建id

时将其附加到div

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>

Answer 2

您可以使用类img的元素长度将其用作id的后缀：

＆＃13;

function add_div(){
  var div = document.createElement('div');
  document.body.appendChild(div);
  div.className = 'ui-modal';
  div.id = 'test-' + document.querySelectorAll('.ui-modal > .msg').length;
  div.innerHTML = '<span class="msg">Hello world.</span>';
  //div.textContent = 'Hello world.';
}

＆＃13;

.ui-modal{
  width: 200px;
  height: 50px;
  border: 1px solid red;
}

＆＃13;

<div class="wrapper">
  <input type="button" value="ADD" onclick="add_div();">
  <input type="button" value="DELETE">
</div>

＆＃13;

如何动态添加多个div，并追加具有不同ID的子项？

2 个答案: