JQuery append to variable element

Question

I am building my own JS library backed by jquery. The constructor starts building on top of an existing div to flesh it out. In the library I am making an ajax call, so to this initial div I know how to append like (where this is the initial div passed in):

var t = this;
var sdiv = t.append("<ul class='foo'></ul>");

So now I need to loop through and append elements to the variable "sdiv". For some reason

$(sdiv).append("<li class='bar'>" + element[i] + "</li>");

isn't working/rendering. How do you append elements to other elements created as variables?

Thanks

What does the this in var t = this refer to? Could it be pointing to window? If not have you considered that it should be var t = $(this)? — PeterKA
– PeterKA, Commented Jun 18, 2014 at 17:04
Correcting that should fix everything, right? Or is there an issue still outstanding? — PeterKA
– PeterKA, Commented Jun 18, 2014 at 17:07
@user3558931 there are other issues. See my answer for how to fix them. — Rory McCrossan
– Rory McCrossan, Commented Jun 18, 2014 at 17:11

Rory McCrossan · Accepted Answer · 2014-06-18 17:04:04Z

2

It's not working because sdiv will be the same as the t variable, as append returns the originally selected element.

Instead, create the ul in it's own variable, then use that reference when appending. Try this:

var $t = $(this);
var $sdiv = $('<ul />', { class: 'foo' }).appendTo($t);

// in your loop...
$('<li />', { class: 'bar', text: element[i] }).appendTo($sdiv);

Note that I also wrapped this in a jQuery object. Assuming this code is being executed in an event handler, you would need to do that.

answered Jun 18, 2014 at 17:04

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

7 Comments

MeanDean73 Over a year ago

the code is being executed in a constructor. however, you are correct the appendTo() now points to the right object! Thanks!

PeterKA Over a year ago

When using class as in { class: 'foo' } we always have to write "class".

Rory McCrossan Over a year ago

@user3558931 class is not a reserved word in JS, there's no need to quote it: jsfiddle.net/Lk8m3. Nothing wrong with it though if you prefer that though.

MeanDean73 Over a year ago

@RoryMcCrossan is it just better practice to isolate the elements like class and text outside the object itself? (as i noticed you did that). Just for my own curiosity.

Rory McCrossan Over a year ago

@user3581725 It's personal preference. I believe the method I use of passing properties in a separate object when creating an element is slightly quicker due to not having to split the string apart with Regex. Any gains are minimal.

|

PeterKA · Accepted Answer · 2014-06-18 17:33:25Z

1

@RoryMcCrossan has provided a great answer. Another approach could be as follows:

var $t = $(this)
var $sdiv = $('<ul class="foo"/>');

Then in your loop do the following:

 $sdiv.append( $('<ul class="bar"/>').text( element[i] ) );

Then finally append $sdiv to $t:

 $t.append( $sdiv );

edited Jun 18, 2014 at 17:33

answered Jun 18, 2014 at 17:26

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

JQuery append to variable element

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related