jQuery fails to retain multiple classes when appending elements

Question

Strange things are happening when I use jQuery.

I create a string like this:

myBlock = """<div class="alert alert-success">...</div>"""

But when I try to append it using jQuery,

$("#msg_container").append(myBlock)

The resulting div in the DOM looks like this:

<div alert-success="" class="alert">blah</div>

How can I append an element with two classes using jQuery?

Answer 1

Answer №1

It's a bit puzzling to see an abundance of quotation marks at the start, but here is the solution:

mySection = "<div class='notification notification-warning'>...</div>"

Make sure to use single quotes for the class attributes within a double quoted string.

Answer 2

It's a bit puzzling to see an abundance of quotation marks at the start, but here is the solution:

mySection = "<div class='notification notification-warning'>...</div>"

Make sure to use single quotes for the class attributes within a double quoted string.

Answer 3

myBlock = '<div class="notification notification-success">...</div>'

or 

myBlock = "<div class='notification notification-success'>...</div>"

Answer 4

myBlock = '<div class="notification notification-success">...</div>'

or 

myBlock = "<div class='notification notification-success'>...</div>"