Как добавить существующий элемент HTML в другой элемент?

Question

Я хочу добавить несколько копий div с идентификатором hello в div с идентификатором container .Как мне сделать это с помощью JavaScript?

<div id="container">

</div>

<div id="hello">
   <p>Hello</p>
</div>

Answer 1

https://www.w3schools.com/jsref/met_node_appendchild.asp

проверьте это, это решит вашу проблему, НО используйте класс для тега, а не ID.Идентификаторы уникальны, класс предназначен для нескольких элементов.

Вы можете назвать класс в CSS следующим образом:

.className {
  /*CODE*/
}

Answer 2

Вы можете использовать метод append ():

$(document).on('click', function(){
   $('#container').append( $('#hello') ); 
});

Answer 3

Использование cloneNode и appendChild.

Поскольку id s должно быть уникальным в документе, я переключил вещи на использование класса hello.

function makeCopy() {
  const target = document.getElementById("container");
  const source = document.querySelector(".hello");
  const clone = source.cloneNode(true);
  target.appendChild(clone);
}

.hello {
  padding: 3px;
  margin: 3px;
  border: 1px dotted orange;
}

<div id="container">
  This is the container.
</div>

<button onclick="makeCopy()">Add a clone of hello above</button>


<div class="hello">
  <p>Hello</p>
</div>