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 respuestas
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>
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*/
}
Puedes usar el método append ():
$(document).on('click', function(){
$('#container').append( $('#hello') );
});
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.