add an element before another with jquery

Question

I have the following dom :

<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>

I would like to add before the nth test element a new element.

I am able to add a new element for all the test element with this code :

var newElement = "div class=\"test-new\""; 
$(".test").before(newElement);

But I am not able to select only the desired element thanks to an index(example : 3), these 2 codes throws an error :

var newElement = "div class=\"test-new\""; 
$(".test")(3).before(newElement);
$(".test")[3].before(newElement);

Tushar · Accepted Answer · 2015-06-17 14:44:42Z

1

Use insertBefore:

$('<div />').addClass('test-new').insertBefore('.test');

To insert the element before n-th element use eq:

$('<div />').addClass('test-new').insertBefore($('.test').eq(0));
// Insert before first .test element

$('<div />').addClass('test-new').insertBefore($('.test').eq(3));
// Insert before third .test element

The eq index starts from zero.

Reduce the set of matched elements to the one at the specified index.

edited Jun 17, 2015 at 14:44

answered Jun 17, 2015 at 14:43

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karl-André Gagnon · Accepted Answer · 2015-06-17 14:45:01Z

1

There is a function to select an element by index and still keep it as a jQuery object. This function is .eq():

$(".test").eq(3).before(newElement);

It is 0 based index, so 3 select the 4th element.

You should also wrap var newElement = "div class=\"test-new\""; between < and > to make a valid element:

var newElement = "<div class=\"test-new\">";

jQuery will interpret this as a new Node instead of a selector.

answered Jun 17, 2015 at 14:45

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Comments

Sudhansu Choudhary · Accepted Answer · 2015-06-17 14:59:53Z

1

Use this, should work like a charm :)

$(".test:nth-child(3)").before("<div>new item</div>");

answered Jun 17, 2015 at 14:59

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

Comments

wezzy · Accepted Answer · 2015-06-17 14:44:23Z

0

Yes you cannot use the array syntax directly. You can do somethig like this:

$($(".test").get(3)).before(newElement);

Please note the double dollar "$($(" this is necessary because the result of get() it's a DOM element not a jQuery element so you need to pass it to jQuery to use jQuery methods

answered Jun 17, 2015 at 14:44

wezzy

5,9453 gold badges33 silver badges42 bronze badges

Comments

Deepu Sasidharan · Accepted Answer · 2015-06-17 14:49:41Z

0

Try something like this:

HTML

<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>

Jquery

$( ".test:nth-child(2)" ).append( "<div>newtest</div>" );

OUTPUT

1
2
newtest
3
4

FIDDLE

answered Jun 17, 2015 at 14:49

Deepu Sasidharan

5,32911 gold badges46 silver badges100 bronze badges

3 Comments

Karl-André Gagnon Over a year ago

.append will add the div to .test. I think he want to add it before .test.

Deepu Sasidharan Over a year ago

@Karl-AndréGagnon, then can use prepend, right??

Karl-André Gagnon Over a year ago

No, prend is the same, it will be added to .test (only it will be first instead of last, that's the difference before append and prepend). You need .after() or .before()

PhilVarg · Accepted Answer · 2015-06-17 14:50:25Z

0

use the eq selector in jquery

var newElement = "div class=\"test-new\""; 
$(".test:eq(3)").before(newElement);

you should note, the newElement needs to be valid html, so you may want to change it to

var newElement = "<div class=\"test-new\"></div>"; 
$(".test:eq(3)").before(newElement);

fiddle http://jsfiddle.net/0qeh1rL1/

answered Jun 17, 2015 at 14:50

PhilVarg

4,8303 gold badges22 silver badges39 bronze badges

Collectives™ on Stack Overflow

add an element before another with jquery

6 Answers 6

Comments

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related