8

I use jQuery API append() to add a new element:

$(selector).append('<div class="test"></div>')

I want the expression return the just appended element for my further use, however it returns $(selector). So, how can I let jQuery to return the just appended element to avoid re-selecting it?

Shuping
  • 5,388
  • 6
  • 43
  • 66

7 Answers7

10

I believe the way to do that would be to use appendTo()

Then you could do 

$('<div class="test"></div>').appendTo(selector).css('background','blue');

or whatever you wanted to do.

That would cause the div you just appended to have a blue background.

Jeff Shaver
  • 3,315
  • 18
  • 19
4

You can just store a reference to it. Keep in mind that you should do all your manipulations with $div before appending it to an element that is part of the DOM to avoid multiple reflows.

var $div = $('<div class="test"></div>');

$(selector).append($div);
plalx
  • 42,889
  • 6
  • 74
  • 90
  • You don't need the $ before the div var – Bill Apr 10 '13 at 12:10
  • 4
    @BillyMathews, that is common for jquery object vars – Smern Apr 10 '13 at 12:10
  • 2
    @BillyMathews It's a naming convention widely used to identity variables that hold references to jQuery objects. – plalx Apr 10 '13 at 12:11
  • @BillyMathews what is the difference between this answer and mine? – Jamie Hutber Apr 10 '13 at 12:23
  • 1
    @Jamie: Here, `$div` is a jQuery object. In your answer `markup` is a string. Even if you pass it to jQuery again it will create a different DOM element for the same markup. So, the key is to keep a reference to the DOM element, not the HTML string. – Felix Kling Apr 10 '13 at 12:26
  • the OP didn't ask for anything like this though :/ and everything in js is referenced. So it wouldn't create a new DOM element. IMO – Jamie Hutber Apr 10 '13 at 12:30
  • @JamieHutber, "how can I let jQuery to return the just appended element to avoid re-selecting it" In other words, "how can I keep a reference to the element that was added". This is the whole point of the question. – plalx Apr 10 '13 at 12:38
  • @Jamie: You asked for the difference of the answers, I'm not judging (well, in fact I do, this question is a duplicate and you should all vote to close it). And no, parsing the same HTML string twice will create different DOM elements. – Felix Kling Apr 10 '13 at 12:38
  • argh... well why didn't heee say that :p but ye, make sense. Still think peoples responses were wrong and ill informed :) – Jamie Hutber Apr 10 '13 at 12:39
2

You can create the element independently from append by passing the html string to the jQuery function:

$('<div class="test"></div>');

You can use that either in the append

$(selector).append(/* $div = */$('<div class="test"></div>').… );

or with appendTo

/* $div = */$('<div class="test"></div>').appendTo(selector).… ;

or you just separate them into two statements.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
0

This can work too.

<div class="inner">hellworld</div>
$('.inner').append('<p>paragraph</p>');

this will insert two new s and an existing as the last three child nodes of the body

var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('body').append($newdiv1, [newdiv2, existingdiv1]);
Braks
  • 92
  • 7
0

Please try this

$(selector).append('<div class="test"></div>').find('div.test:last-child')
Anjith K P
  • 2,158
  • 27
  • 35
0

You can return it by add childern jQuery function as in this example jsfiddle

$(selector).append('<div class="test"></div>').children('.test');

or you can use prependTO jQuery function as in this example jsfiddle :

$('<div class="test"></div>').prependTo(selector);
Mohamed AbdElRazek
  • 1,654
  • 14
  • 17
-1

Maybe you can try either 

var elt = $('<div class="test"></div>');
$(selector).append(elt);

Or using appendTo instead of append, and then chain whatever you need (show() in the example below)

$('<div class="test"></div>').appendTo($(selector)).show()
Robin Leboeuf
  • 2,096
  • 1
  • 13
  • 14
  • Still don't understand why same solutions as the selected one are downvoted... we don't all have a good connection, and sometimes it's (incorrectly) can be considered as duplicate because of posting time, but its explanations can be helpful for those who need examples... – Robin Leboeuf Apr 10 '13 at 12:30