Cómo envolver un elemento existente con otro en jQuery?

¿Cómo puedo crear un <div> que rodea un <div> existente.Cómo envolver un elemento existente con otro en jQuery?

Mi código es el siguiente:

<div id="test"> 
    <h2>Greetings</h2> 
    <p>Test</p> 
    <div class="inner">Hello</div> 
    <p>Test</p> 
    <div class="inner">Goodbye</div> 
</div> 
<div id="test2"> 
    <h2>Greetings</h2> 
    <p>Test</p> 
    <div class="inner">Hello</div> 
    <p>Test</p> 
    <div class="inner">Goodbye</div> 
</div> 

<script> 
    $("#test").before('<div class="test3">'); 
    $("#test2").after('</div>'); 
</script>

Pero parece que no puede insertar un <div> sin una etiqueta de cierre. Entonces, ¿cómo lograr eso?

Fuente

2011-12-05 newbie

Es posible que desee para envolver el código en $ (function() {// código aquí}); para que solo lo ejecute la página está completamente cargada –

Tengo una lista dinámica con un iterador. Y necesito insertar 3 elementos por div. :( – newbie

Kyoka, no es necesario porque el html viene antes del script. –

Utilice la .wrapAll()^doc método

$('#test, #test2').wrapAll('<div class="test3">');

Fuente

2011-12-05 01:29:54

jQuery ajusta la DOM API nativa, que funciona con elementos HTML completos.

No puede insertar la mitad de una etiqueta.

En su lugar, debe compilar un nodo completo creando un $('<div />') separado, anexándole varios elementos y luego agregando el árbol completo al DOM.

Fuente

2011-12-05 01:23:10 SLaks

hay una solución alternativa o ¿cómo puedo insertar tres elementos dentro de un div de forma dinámica? – newbie

Esto realmente no hace nada para responder la pregunta. – riwalk

@ novato: construye el árbol antes de anexarlo. Ver mi edición. – SLaks

Puede usar la llamada a la API .wrap() que ajustará el HTML existente con un nuevo elemento.

Fuente

2011-12-05 01:25:08 Tak

esto envolverá cada uno de los elementos seleccionados ... por lo que colocará un contenedor diferente alrededor de cada uno de los elementos ... 'wrapAll' es el que se necesita en este caso ... –

bien, utilizar lo siguiente:

<script> 
     var inner=$("#test"); 
     var outer=$('<div class="outer"></div>'); 
     outer.html(inner.html()); 
     inner=outer; 
</script>

Fuente

2011-12-05 01:26:39

La respuesta de Tak es mejor –

Entonces, ¿no eliminas tu respuesta? –

Esto es lo que debe hacer:

<script type="text/javascript"> 
$(function() { 
    $('<div class="test3"></div>') 
     .insertBefore($('#test')) 
     .append($('#test')) 
     .append($("#test2")); 
} 
</script>

Fuente

2011-12-05 01:34:10 Silkster

Cómo envolver un elemento existente con otro en jQuery?

Respuesta

Cuestiones relacionadas