如何更改clone.Node中父元素及其所有子元素的id？
我需要更改父级和子级的 id，但只有父级的 id 发生更改。
<div id="parent" style="border:1px solid black;background-color:pink">
<div id="child1" style="color:red;">A r element</div>
<div id="child2" style="color:green;">A g element</div>
<div id="child3" style="color:blue;">A b element</div>
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var elmnt = document.getElementById("parent");
var elmntid = document.getElementById("parent").id;
var cln = elmnt.cloneNode(true);
cln.id = elementid + "copy";
document.body.appendChild(cln);
}
最佳答案
如果你想向所有克隆元素的 ID 添加一些内容，你可以这样做:
document.querySelector('#button').addEventListener('click', () => {
const clone = document.querySelector('#parent').cloneNode(true);
const elementsThatHaveId = [...clone.querySelectorAll('[id]')];
if (clone.matches('[id]')) {
elementsThatHaveId.push(clone);
}
elementsThatHaveId.forEach((e) => {
e.id += 'Copy';
});
document.body.append(clone);
});<div id="parent" style="border:1px solid black;background-color:pink">
<div id="child1" style="color:red;">A r element</div>
<div id="child2" style="color:green;">A g element</div>
<div id="child3" style="color:blue;">A b element</div>
</div>
<button id="button">Try it</button>它的作用是选择克隆节点中具有 id 属性的所有元素 (clone.querySelectorAll('[id]'))，添加节点如果结果数组也有 id 属性，则将其自身添加到结果数组中，然后遍历列表来修改所有这些元素的 ID
关于javascript - 如何更改clone.Node中父元素及其所有子元素的id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60059966/