Quiero agregar varias copias de div con id hello en el div con id container . ¿Cómo hago esto usando JavaScript?


<div id="container">

</div>

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

-3
Raavan 24 sep. 2019 a las 14:37

3 respuestas

La mejor respuesta

Usando cloneNode y appendChild.

Como id s debería ser único en un documento, cambié las cosas para usar una clase hello en su lugar.

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>
1
AKX 24 sep. 2019 a las 11:41

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

Mira esto, resolverá tu problema, PERO usa una clase para la etiqueta, no una ID. Los ID son únicos, una clase es para múltiples elementos.

Puedes llamar a clase en CSS como esta

.className {
  /*CODE*/
}
-1
sao 24 sep. 2019 a las 11:41

Puedes usar el método append ():

$(document).on('click', function(){
   $('#container').append( $('#hello') ); 
});
-1
Sachin Sharma 24 sep. 2019 a las 11:47