Question

I’m trying to reproduce this html using jquery on a click event.

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

before the click event I have the following html:

<div class="comments_action_207"></div>

So I need to add this inside the previous code

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

Answer 1

I assume you’re looking for something similar to this:

$(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);
    });
});

The click is assigned specifically to the comments_action_207 element. I assume you want to assign to others as well.

This will take the number from the end of the class, create the new elements, adding on the number where needed, and will append the result to the comments_action_207 element.

The resulting HTML will be:

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