jQuery append() vs appendChild()

Question

Here's some sample code:

function addTextNode(){     var newtext = document.createTextNode(" Some text added dynamically. ");     var para = document.getElementById("p1");     para.appendChild(newtext);     $("#p1").append("HI"); } 

<div style="border: 1px solid red">     <p id="p1">First line of paragraph.<br /></p> </div> 

What is the difference between append() and appendChild()?
Any real time scenarios?

Answer 1

The main difference is that appendChild is a DOM method and append is a jQuery method. The second one uses the first as you can see on jQuery source code

append: function() {     return this.domManip(arguments, true, function( elem ) {         if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {             this.appendChild( elem );         }     }); }, 

If you're using jQuery library on your project, you'll be safe always using append when adding elements to the page.