Query append() and appendTo()
append() : Append to end of the selected element
HTML : <ul id=”test”>
<li>test</li>
</ul>
JQuery : jQuery(“#test”).append(“<li>test1</li>”);
OUTPUT : <ul id=”test”>
<li>test</li>
<li>test1</li>
</ul>
appendTo : Append to end of the selected element
HTML : <div>Hello</div>
JQuery : $(‘<p>Test</p>’).appendTo(‘.inner’);
OUTPUT : <div class=”inner” > Hello
<p>Test</p>
</div>
Difference:
Both jQuery append() and appendTo() methods are doing the same task, add a text or html
content after the content of the matched elements. The major difference is in the syntax.
//Create our content
var appendHTML = “<p>I’m going to be added to the DOM</p>”;
//Select our element, then add the html
$(“#container”).append(appendHTML);
//Create our content, then select the element to append to
$(appendHTML).appentTo(“#container”);