Question

我需要动态创建以下HTML

<div role="main" class="ui-content oms-content">

            <div class="myactivelabelsWrap">

                <div data-role="collapsible" data-inset="false">
                    <h3>Home <a class="icon-pencil-1 labelEditIcon"></a></h3>
                </div>

                <div data-role="collapsible" data-inset="false">
                    <h3>SoftSol <a class="icon-pencil-1 labelEditIcon"></a></h3>
                </div>
            </div>

            <div class="row">
                <button class="btn btn-a">Create New Label</button>
            </div>

        </div>

我是这样尝试的

首先，我在HTML中定义了以下内容

    <div role="main" class="ui-content oms-content">


 <div class="row">
                <button class="btn btn-a">Create New Label</button>
            </div>

    </div>

这是我的小提琴

http://jsfiddle.net/df4pb5hd/

var response = 
{
    "Restaurants": [
        {
            "RestrntArea": "Home",
            "cust_loc_id": "338"
        },
        {
            "RestrntArea": "Soft",
            "cust_loc_id": "339"
        }
    ]
}
showLabels();


function showLabels() {
  var labelsdivtemp=$('<div class="myactivelabelsWrap"></div>');
  for (var i = 0; i < response.Restaurants.length; i++) {
   var name = response.Restaurants[i].RestrntArea;
  if(name)
  {
labelsdivtemp.append('<div data-role="collapsible" data-inset="false"><h3>'+name+'<a class="icon-pencil-1 labelEditIcon"></a></h3></div>');
  }
 }
 $("#labelsdivheader").append(labelsdivtemp);
}

我的问题是如何将创建新标签移到最后？

Answer 1

您可以使用insertBefore方法：

labelsdivtemp.insertBefore( '#labelsdivheader .row' );

jsFiddle

Answer 2

您可以使用prepend方法代替append：

$("#labelsdivheader").prepend(labelsdivtemp);

这是jsfiddle。

Answer 3

以下是.detach()并附加使用：

 $buttonRow = $('#labelsdivheader .row').detach();

 $("#labelsdivheader").append($buttonRow);

Fiddle

如何附加到div并在另一个div之前移动它

3 个答案: