Как изменить идентификатор родителя и всех его дочерних элементов в clone.Node - PullRequest
Новая
       46

Как изменить идентификатор родителя и всех его дочерних элементов в clone.Node

0 голосов
/ 04 февраля 2020

Как изменить идентификатор родителя и всех его дочерних элементов в clone.Node? Мне нужно изменить идентификатор родителя и ребенка, но я получаю только измененный идентификатор родителя .. 

<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);
}

Ответы [ 2 ]

1 голос
/ 04 февраля 2020

Попробуйте это ... сделать функцию для изменения идентификатора, и l oop через дочерние элементы и передать каждый дочерний элемент самой себе. 

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>
1 голос
/ 04 февраля 2020

Если вы хотите добавить что-то ко всем идентификаторам клонированных элементов, вы можете сделать что-то вроде этого: 

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 и затем go через список, чтобы изменить идентификаторы всех этих элементов

...