.append jQuery function

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.

...When it's by itself, it's still just <div />, it's a self-closing tag, since you dont have another tag following it to close it. — nbrooks
– nbrooks, Commented Sep 16, 2012 at 19:13

Blender · Accepted Answer · 2012-09-16 18:59:34Z

5

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

answered Sep 16, 2012 at 18:59

Blender

300k55 gold badges462 silver badges511 bronze badges

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

5 Comments

Blender Over a year ago

Really? I'll have to add that in. Thanks!

Roko C. Buljan Over a year ago

sure it is: jsbin.com/omujik/1/edit and also: <div/> (without the space lol) +1

nbrooks Over a year ago

Actually it does accept the map containing HTML attributes...or am I misunderstanding your post?

J. Bruni Over a year ago

@Dasun: <div><div/> is not valid HTML, while <div></div> is correct. I am sure you already know it. You just misplaced the / character. In other words: you can pass the opening div tag... you just need to do it right.

Techie Over a year ago

Oops that is a typo. I'm sorry about it.Thanks for the answer

nbrooks · Accepted Answer · 2012-09-16 19:30:58Z

0

Please try this ...It will work

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

edited Sep 16, 2012 at 19:30

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

answered Sep 16, 2012 at 19:17

Pushpendra

5383 silver badges10 bronze badges

Collectives™ on Stack Overflow

.append jQuery function

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related