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?

Answer 1

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.

Answer 2

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));