CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

How to append to the div and move it before another div

I need to create the following HTML dynamically 

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

I was trying it this way

First i defined the folowing in my HTML 

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


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

    </div>

Thisis my fiddle

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);
}

My question is how to move create new label to the end ??

Upvotes: 2

Views: 164

Answers (3)

jyrkim
jyrkim

Reputation: 2869

Here is .detach() and append used:

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

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

Fiddle

Upvotes: 0

Nelio
Nelio

Reputation: 766

You can use prepend method instead append:

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

Here is the jsfiddle.

Upvotes: 1

antyrat
antyrat

Reputation: 27765

You can use insertBefore method:

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

jsFiddle

Upvotes: 1

Related Questions