Question

The HTML which should be produced after manipulation:

<div class="comments_action_207">
   <div class="list_item_comments list_item_comments_207">
      <div class="comment_separator">text goes here</div>
   </div>
</div>

HTML before manipulation:

<div class="comments_action_207"></div>
<div class="list_item_comments list_item_comments_207"><div class="comment_separator">text goes here</div></div>

JavaScript which allows me to do the above manipulation is:

$(function() {
    $('.comments_action_207').click(function() {
        var num = this.className.split('_').pop();
        $('</div>',{'class':'list_item_comments list_item_comments_' + num})
            .append('<div class="comment_separator">text goes here</div>')
            .appendTo(this);
    });
});

I tested the JavaScript above and it works fine. But what I don’t understand is why I don’t have to pass an opening div tag as below. If I pass an opening div tag code does not work as I intend to.

$('<div></div>',{'class':'list_item_comments list_item_comments_' + num}).

If you can please explain it line by line so It’s is easier for me to understand.

Answer 1

Your <div> doesn’t close properly:

$('<div><div/>'
            ^

jQuery accepts <div />, <div> and <div></div>, but nothing else (i.e. no HTML attributes): http://api.jquery.com/jQuery/#jQuery2