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.

Answer 1

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 +

Answer 2

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

Answer 3

I usually end up doing something like this:

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

Answer 4

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>");

Answer 5

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

Answer 6

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');