使用jQuery在div标签内部包裹元素

Question

我试图用jQuery在<div>标签内包装几个元素。

我首先追加一个整体包装，然后是一个头元素，然后是一个span元素。我想换一个容器DIV页眉和跨度，然后在这里的几个职位，并通过阅读文档，但都无法得到它的工作，目前它看起来像这样：

$(responseData).each(function(i) { 
    var CountryN= this.CountryN; 
    var Subtitles= this.subTitle; 
    var $mainWrapper = $('<div/>').addClass('mainWrap'); 
    $mainWrapper.append($('<h4/>').text(CountryN)); 
    $mainWrapper.append($('<span/>').text(Subtitles).addClass('subT')); 
}) 

导致在此：

<div class="mainWrap"> 
    <h4>USA</h4> 
    <span class="subT">$12.1,563m, D.A.C = 01/01/2013</span> 
</div> 

我想要实现的是这种结构：

<div class="mainWrap"> 
    <div class="countryWrap"> 
     <h4>USA</h4> 
     <span class="subT">$12.1,563m, D.A.C = 01/01/2013</span> 
    </div> 
</div> 

我的页面有几个这些部分（每一个自己mainWrap内），试着用包装，而是它需要包装机器人h标题和副标题不知道如何选择它们（如果这是最好的方式）

Answer 1

我猜你想要的mainWrap内的多个countryWraps，在这种情况下，你必须创建mainWrap每个循环之外。

var $mainWrapper = $('<div/>').addClass('mainWrap'); 

$(responseData).each(function(i) { 
    var CountryN= this.CountryN; 
    var Subtitles= this.subTitle; 
    var $countryWrapper = $('<div/>').addClass('countryWrap'); 
    $countryWrapper.append($('<h4/>').text(CountryN)); 
    $countryWrapper.append($('<span/>').text(Subtitles).addClass('subT')); 
    $mainWrapper.append($countryWrapper); 
}) 

Answer 2

jQuery有几个包装HTML的内容。我相信wrapInner（）会解决这个问题。

http://api.jquery.com/category/manipulation/dom-insertion-around/

http://jsfiddle.net/ynLmhk83/