Question

I am trying to programatically add a DIV with the class of error_icon to the page using jQuery. This is the HTML:

<div id="error_icon_holder"></div>

When they’re added, the markup should resemble:

<div id="error_icon_holder">
    <div class="error_icon"></div>
</div>

I tried using .addClass, but that resulted in:

<div id="error_icon_holder" class="error_icon"></div>

And I also tried .after which also didn’t work. Can someone let me know how to do this? Thanks.

Answer 1

You want .append()

$('#error_icon_holder').append('<div class="error_icon"></div>');

• http://api.jquery.com/append/

---

You could also flip it around, and use .appendTo().

$('<div class="error_icon"></div>').appendTo('#error_icon_holder');

• http://api.jquery.com/appendTo/

---

Or since error_icon_holder appears to be empty, you could use .html(). (This would normally overwrite any existing content.)

$('#error_icon_holder').html('<div class="error_icon"></div>');

• http://api.jquery.com/html/