如何在 clone.Node 中更改父元素及其所有子元素的 id答案

【问题标题】：How to change id of parent and all its child elements in clone.Node如何在 clone.Node 中更改父元素及其所有子元素的 id
【发布时间】：2020-08-25 11:49:42
【问题描述】：

如何更改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);
}

【问题讨论】：

标签： javascript parent-child clonenode

【解决方案1】：

如果你想在所有克隆元素的 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 的列表

【讨论】：

【解决方案2】：

试试这个...创建一个函数来更改 id，并循环遍历子元素并将每个子元素传递给它自己的函数。

window.addEventListener("load", function() {
  document.getElementById("clone").addEventListener("click", function() {
    var clone = document.getElementById("a").cloneNode(true);
    idC(clone);
    document.getElementById("t").appendChild(clone);
  });
});

function idC(elm) {
  elm.id = "copy" + elm.id;
  for (let i = 0; i < elm.childElementCount; i++) {
    idC(elm.children[i]);
  }
}

<div id="a">
  <div id="b">
    div
    <input value="input" id="c">
  </div>
  <div id="b2">
    label
    <div id="c2">
      div
      <input value="input" id="c3">
    </div>
  </div>
  <input value="input" id="b3">
</div>
<div id="t">
  <input id="clone" value="clone" type="button">
</div>

【讨论】：