Append DIV and immediately add class in jQuery

Question

What I'm trying to accomplish: I want to add a DIV after an existing DIV and assign it a specific class.

I started with this:

var myClass = "thisIsMyClass";
$(this).after("<div></div>").addClass(myClass)

The problem with that is that myClass gets added to $(this) rather than the newly created DIV.

So I gave this a try:

var myClass = "thisIsMyClass";
$(this).after("<div class='" & thisIsMyClass & "'></div>")

But jQuery doesn't like that either.

I can do this, however:

$(this).after("<div class='thisIsMyClass'></div>")

jQuery is OK with that syntax. Of course, I lose the ability to pass it in as a variable.

I'm guessing I'm doing something fairly obviously wrong. But I'm stumped as to what that is.

Kobi · Accepted Answer · 2010-01-05 18:19:54Z

13

$(this).after( $("<div></div>").addClass(myClass) );

answered Jan 5, 2010 at 18:19

Kobi

139k41 gold badges259 silver badges302 bronze badges

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

1 Comment

DA. Over a year ago

I have no idea why it never occurred to me but I never thought to nest statements in jQuery. Thanks, Kobi!

John Boker · Accepted Answer · 2010-01-05 18:17:22Z

5

maybe something like:

var myClass = "thisIsMyClass";
var div = $("<div></div>").addClass(myClass);
$(this).after(div);

using the & didnt work because this is not vb, string concatenation is done with the +

answered Jan 5, 2010 at 18:17

John Boker

83.8k17 gold badges101 silver badges130 bronze badges

1 Comment

DA. Over a year ago

"because this is not vb". DOH! (I'm slapping my forehead right now). Clearly I did not get enough sleep last night.

gnarf · Accepted Answer · 2010-01-05 18:20:35Z

3

I usually end up doing something like this:

var myClass = 'thisIsMyClass';
$(this).after($("<div/>").addClass(myClass));

answered Jan 5, 2010 at 18:20

gnarf

107k26 gold badges129 silver badges161 bronze badges

Comments

Kristopher Johnson · Accepted Answer · 2010-01-05 18:22:37Z

2

$("<div></div>").insertAfter(this).addClass(myClass);

answered Jan 5, 2010 at 18:22

Kristopher Johnson

82.8k55 gold badges253 silver badges310 bronze badges

1 Comment

DA. Over a year ago

That's an interesting option. Thanks!

jjacka · Accepted Answer · 2010-01-05 18:25:11Z

2

The JQuery after method returns the same selector that you called after on to allow for method chaining (as do most JQuery methods), which is why your class name is going on to the this element.

To do this you can either do:

$(this).after($('<div class="' + myClass + '"></div>'));

or reverse the selector order :

$('<div></div>').insertAfter($(this)).addClass('thisIsMyClass');

answered Jan 5, 2010 at 18:25

jjacka

5314 silver badges9 bronze badges

Comments

Daan · Accepted Answer · 2010-01-05 18:21:10Z

0

Did you try using a "+" character instead of a "&" ? And by the way, I don't see any semicolon at the end of some commands, might that be wrong ?

var myClass = "thisIsMyClass";
$(this).after("<div class='"+ thisIsMyClass +"'></div>");

answered Jan 5, 2010 at 18:21

Daan

1,87718 silver badges18 bronze badges

Comments

PrimeLens · Accepted Answer · 2012-07-25 21:38:54Z

0

I've been doing this because its super easy to read when I visit code later

$('#description').append('<p></p>');
$('#description p:last-child').addClass('name');

answered Jul 25, 2012 at 21:38

PrimeLens

2,7274 gold badges25 silver badges28 bronze badges

Comments

Ashish Kwatra · Accepted Answer · 2016-04-07 07:29:57Z

0

Although Replying it very late but it's a concrete solution to the above ques.You can add a div with a class to any selector through js like this:

$('<div/>',{ class : 'sample'}).appendTo("body");

answered Apr 7, 2016 at 7:29

Ashish Kwatra

1291 silver badge5 bronze badges

Collectives™ on Stack Overflow

Append DIV and immediately add class in jQuery

8 Answers 8

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related