27

I have a div with the ID wrapper, and I am using .append() to insert some content at the end of that div, like this:

$("#wrapper").append('<div class="content"><div class="subcontent">Some stuff</div></div>');

However, I also want the option to insert a new child before the last content div in the wrapper.

So if the HTML output looks like this:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

I want to insert an element before the last one, so I get this:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Third
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

How would I do this?

Scimonster
  • 32,893
  • 9
  • 77
  • 89
Boxiom
  • 2,245
  • 6
  • 40
  • 51

9 Answers9

43

You could use .before() to add a sibling before the element:

$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');

.insertBefore() does the same thing with a different syntax, namely that you select the element to be added, and pass the element you want to add it before.

$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>
Cid
  • 14,968
  • 4
  • 30
  • 45
Scimonster
  • 32,893
  • 9
  • 77
  • 89
9

You can use insertBefore():

$('<div class="content"><div class="subcontent">Some stuff</div></div>').insertBefore('#wrapper > div:last');

Or before():

$('#wrapper > div:last').before('<div class="content"><div class="subcontent">Some stuff</div></div>');
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
3

This is how I got there:

http://jsfiddle.net/lharby/00tk6avg/

var htmlString = '<div class="subcontent">Some stuff</div>';

$(htmlString).insertBefore('.content div:last');
lharby
  • 3,057
  • 5
  • 24
  • 56
2

Select the last element with :last-of-type and use before() to append the new element:

$('.content:last-of-type').before('<div class="new">test</div>');
.new { color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>
kapantzak
  • 11,610
  • 4
  • 39
  • 61
1

Use insertBefore:

$('<div class="content"><div class="subcontent">Third</div></div>').insertBefore('#wrapper .content:last');

Insert every element in the set of matched elements before the target.

Demo: http://api.jquery.com/insertBefore/

Tushar
  • 85,780
  • 21
  • 159
  • 179
1

You can last() for selecting last item, and before() for appending 

$("#wrapper .content").last().before('<div class="content"><div class="subcontent">Some stuff</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div class=" content ">
        <div class="subcontent ">
            First
        </div>
    </div>
    <div class="content ">
        <div class="subcontent ">
            Second
        </div>
    </div>
</div>
Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188
0
$( "<p>Test</p>" ).insertBefore( "#wrapper > div:last-child" );
braks
  • 1,505
  • 15
  • 23
0

you can use nth last child to select the second last div. fiddle: http://jsfiddle.net/08ta9wnL/

html:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

javascript:

$(document).ready(function(){
    $("#wrapper div:nth-last-child(2)").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
});
man_luck
  • 1,605
  • 2
  • 20
  • 39
0

You can do like this

$("#wrapper .content:last").before("<div class="content"><div class="subcontent">Some stuff</div></div>");

Have a look at fiddle https://jsfiddle.net/48ebssso/

Ritu Gupta
  • 507
  • 2
  • 8
  • 22