How to append HTML using jQuery

Question

I am building up an HTML element using

$(this).html(' my html here');

There are many elements I need to add here with different CSS. So what I want is I should be able to do append another HTML here

$(this).html(' my html here');
$(this).html.append(' another html here');

How can I achieve this?

This is my exact html $(this).parent().html(''+ new_comment +'.css('color', 'red'); $(this).append(' '); Its not working here — codec
– codec, Commented Apr 11, 2016 at 9:14

4b0 · Accepted Answer · 2016-04-11 10:11:42Z

7

First declare.

var html = "";
html += "<span class="spnBlack"> First Content </span>";
html += "<p class="pRed">Second Content</p>";
$(this).html(html);

And in css file define

.spnBlack
{
  background-color: black;
}
.pRed
{
  background-color: red;
}

Please avoid inline css.

edited Apr 11, 2016 at 10:11

answered Apr 11, 2016 at 8:54

4b0

22.4k30 gold badges97 silver badges143 bronze badges

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

2 Comments

codec Over a year ago

This is good but I also want to add certain css styling to the elements individually. For eg: I want my span to be in black and to be in red. I used to do this by $(this).html('my html here').css(styling here)

gavgrif Over a year ago

this is good in terms of performance - you create a string of the code you want to append and then you append it - causing a single change to the DOM - far better than multiple .append() functions which alter the DOM each time. I also agree with @Shree regarding inline styling - best if you an get into a habit of keeping it separate.

jackomelly · Accepted Answer · 2016-04-11 08:54:50Z

6

You can create an html element like this:

var p = $('<p>').html('Hello world');

This still not "exists" in your page, you need to append it to your selector using both append or appendTo (depending from the "point of view"):

$(this).append(p);

or

p.appendTo($(this));

answered Apr 11, 2016 at 8:54

jackomelly

5431 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to append HTML using jQuery

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related