如何更改 parent 的 ID 及其在 clone.Node 中的所有 child 元素

Question

如何更改 parent 的 ID 及其在 clone.Node 中的所有 child 元素？

我需要更改 parent 和 child 的 ID，但只有 parent 的 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);
}

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

它所做的是 select 具有 id 属性 (clone.querySelectorAll('[id]')) 的克隆节点的所有元素，如果节点本身具有id 属性，然后遍历列表以修改所有这些元素的 ID

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

如何更改 parent 的 ID 及其在 clone.Node 中的所有 child 元素

How to change id of parent and all its child elements in clone.Node

javascript

parent-child

clonenode