¿Cómo agrego un elemento html existente a otro elemento?

Question

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>

javascript html ecmascript-6

-3

Raavan 24 sep. 2019 a las 14:37

Answer 1

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

Answer 2

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

Answer 3

Puedes usar el método append ():

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

-1

Sachin Sharma 24 sep. 2019 a las 11:47

¿Cómo agrego un elemento html existente a otro elemento?

3 respuestas

Nuevas preguntas

javascript