0

如何在 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);
}
4

2 回答 2

2

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

于 2020-02-04T15:02:44.853 回答
1

试试这个......创建一个函数来更改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>

于 2020-02-04T15:06:33.420 回答