jquery append class

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>

user113716 · Accepted Answer · 2010-11-01 01:14:05Z

2

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>

answered Nov 1, 2010 at 1:14

user113716

323k64 gold badges454 silver badges441 bronze badges

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

2 Comments

Yannick Over a year ago

I've got this (dont need the click event and num) $('<div/>',{'class':'list_item_comments list_item_comments_214'}) .append('<div class="comment_separator">test</div>') .appendTo(this); but dont work

user113716 Over a year ago

@Yannick - Are you saying that you're not in a click handler? What is triggering the code? If you're not in a handler, but it is just running when the page loads, change .appendTo(this) to .appendTo('.comments_action_214').

todgru · Accepted Answer · 2014-05-28 01:48:41Z

1

you want to set the html code you want to add as a string datatype in a variable in jquery. then in your click function handler, set the html content of the div to the variable. in jquery it would look something like this. (assuming jquery is loaded before this script is ran).

http://docs.jquery.com/Html documentation for how to get and set html in selectors with jquery.

//jquery code:

<script type="text/javascript">
$(document).ready(function(){
    var stringToAdd = "<div class='list_item_comments list_item_comments_207'><div class='comment_separator'>text goes here</div></div>"

    $('.comments_action_207').click(function(){
       $(this).html(stringToAdd);
     });

});
</script>

edited May 28, 2014 at 1:48

todgru

1392 silver badges12 bronze badges

answered Nov 1, 2010 at 1:07

Kobby

5904 silver badges13 bronze badges

2 Comments

Christian Mann Over a year ago

Make code monospace (and therefore legible) by enclosing it in backticks ` or indenting it by four spaces. Great answer, though!

Kobby Over a year ago

Sorry I'm new to Stack Overflow so I just typed the code with manual tabbing

todgru · Accepted Answer · 2014-05-28 01:53:09Z

0

$(".comments_action_207").empty(); // clear the div off, if you do not want to retain old values

$(".comments_action_207").append("<div class='list_item_comments list_item_comments_207'><div class='comment_separator'>text goes here</div></div>");

edited May 28, 2014 at 1:53

todgru

1392 silver badges12 bronze badges

answered Nov 1, 2010 at 1:10

zerodin

8775 silver badges10 bronze badges

Collectives™ on Stack Overflow

jquery append class

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related