var txt1 = "<p class='addedIn'>This is the P ELEMENT created with HTML/CSS code</p>";
var txt2 = "$('<p class=\"addedIn\"></p>').text('This is the P ELEMENT created with jQuery code')";
var txt3 = "document.createElement("p");
txt3.innerHTML="This is the P ELEMENT created with DOM code";
$("body").append(txt1, txt2, txt3);
txt3.addClass = "addedIn";
The above creates three different ways to add in a <p> element.
Using jQuery the (.append) should add all 3 to the END of the <body> section.
When removing the elements all I am doing is (using jQuery)...
$(".addedIn").remove();
Note...
To place the newly created elements at the TOP of the body section then change
.append to be .prepend
And...to place the newly created elements BEFORE a particular element then use
.before and AFTER a particular element use .after
Add elements to the TOP (prepending) of the body...
Add elements to the BOTTOM (appending) of the body...
Add elements BEFORE the 'mainTop section' (before)...
Add elements AFTER the 'mainTop section' (after)...