Mevcut bir öğeyi jQuery'de başka biriyle nasıl sarılır?

Question

Mevcut bir 'u çevreleyen bir nasıl oluşturabilirim?

<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> 

Ama buna bir son etiketi olmadan bir <div> ekleyemezsiniz görünüyor şu şekildedir:

Benim kodudur. Peki bunu nasıl başarabilirim?

Answer 1

.wrapAll()^doc yöntemi

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

Answer 2

jQuery, tam HTML öğeleriyle çalışan yerel DOM API'sini sarar.

Bir etiketin yarısını ekleyemezsiniz.

Bunun yerine, daha sonra DOM tüm ağaç ekleyerek kendisine birden eleman eklenmesi, bir müstakil $('<div />') oluşturarak Tüm düğümü inşa etmeliyiz.

Answer 3

Yeni eleman ile mevcut HTML kaydırılır .wrap() API çağrısı kullanabilirsiniz.

Answer 4

Tamam, o kullanın:

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

Answer 5

Bu kullan yapmanız gereken budur:

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