Как клонировать блок но с другим ID

199

04 августа 2017, 02:24

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function cloNeN() {
$("#ih, #ih1, #ih2").clone()                // сделаем копию элемента Привет, Пока, Привет
.addClass("newElement")         // добавим этой копии класс newElement
.appendTo("#clone");        // вставим измененный элемент в конец элемента clone
}
</script>
</head>
<body onload="cloNeN()">
<div id="container">
<div id="ih" class="hello">Привет</div>
<div id="ih1" class="goodbye">Пока</div>
<div id="ih2" class="hello">Привет</div>
</div>
</br>
<div id="clone"></div>
</body>
</html>

Answer 1

Можно сделать так, как на офф. сайте. Используя .clone().appendTo().attr();

.attr() -> attr.
Сперва указываем сам атрибут, а потом его значение. Пример: .attr('src', 'img/1.png');

<html> 
 
<head> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
  </script> 
  <script> 
    function cloneN() { 
      var id = ['ih', 'ih1', 'ih2']; 
      id.forEach(function(item, i, id) { 
        $('#' + item).clone().attr('class', 'newElement' + item).appendTo('#clone'); 
      }); 
    } 
  </script> 
</head> 
 
<body onload="cloneN()"> 
 
  <div id="container"> 
    <div id="ih" class="hello">Привет</div> 
    <div id="ih1" class="goodbye">Пока</div> 
    <div id="ih2" class="hello">Привет</div> 
  </div> 
 
  <br> 
 
  <div id="clone"> 
  </div> 
 
 
 
</body> 
 
</html>

Answer 2

function cloNeN() { 
  // для элементов Привет, Пока, Привет 
  [...document.querySelectorAll('#ih, #ih1, #ih2')].forEach(element => { 
     // сделаем копию 
     const newNode = element.cloneNode(); 
     // не забудем скопировать содержимое 
     newNode.innerHTML = element.innerHTML; 
     // нам надо другой id 
     newNode.id = 'another'+element.id; 
     // добавим этой копии класс newElement 
     newNode.classList.add('newElement'); 
     // вставим измененный элемент в конец элемента clone 
     clone.appendChild(newNode); 
  }); 
  console.log(clone.innerHTML); 
} 
 
 
 
cloNeN();

<div id="container"> 
  <div id="ih" class="hello">Привет</div> 
  <div id="ih1" class="goodbye">Пока</div> 
  <div id="ih2" class="hello">Привет</div> 
</div> 
 
<div id="clone"></div>