120

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?

3
  • see here jsperf.com/native-appendchild-vs-jquery-append/4
    – PSR
    Apr 10, 2013 at 12:51
  • One is a jQuery method, the other is a native JS method, they both do pretty much the same thing, but append() accepts multiple elements.
    – adeneo
    Apr 10, 2013 at 12:51
  • The bottom is using a library (e.g. the commonly referenced jQuery), the top is using "native" DOM methods to append the element. Apr 10, 2013 at 12:51

8 Answers 8

122

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.

4
  • 1
    Do you know why append is "safe" and appendChild is not? What does domManip do?
    – Rob Fox
    Mar 17, 2014 at 8:29
  • 2
    @RobFox: by safe I meant to say that if you're using jquery then you are safe to use always append (there is no situation where DOM appendchild is prefered). In relation to domManip, it seems the main objective is using DOM DocumentFragments. Here you have a description of the method and here you have the official word of John Resig about motivations behind using fragments Mar 19, 2014 at 21:08
  • 5
    javascript also has a ParentNode.append() now. please check @SagarV's answer for more info.
    – Jo E.
    Dec 26, 2017 at 4:20
  • I was going to say the same thing as @JoE. : see ParentNode.append(). Jun 14, 2020 at 6:23
64

No longer

now append is a method in JavaScript

MDN documentation on append method

Quoting MDN

The ParentNode.append method inserts a set of Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as equivalent Text nodes.

This is not supported by IE and Edge but supported by Chrome(54+), Firefox(49+) and Opera(39+).

The JavaScript's append is similar to jQuery's append.

You can pass multiple arguments.

var elm = document.getElementById('div1');
elm.append(document.createElement('p'),document.createElement('span'),document.createElement('div'));
console.log(elm.innerHTML);
<div id="div1"></div>

0
23

append is a jQuery method to append some content or HTML to an element.

$('#example').append('Some text or HTML');

appendChild is a pure DOM method for adding a child element.

document.getElementById('example').appendChild(newElement);
12

I know this is an old and answered question and I'm not looking for votes I just want to add an extra little thing that I think might help newcomers.

yes appendChild is a DOM method and append is JQuery method but practically the key difference is that appendChild takes a node as a parameter by that I mean if you want to add an empty paragraph to the DOM you need to create that p element first

var p = document.createElement('p')

then you can add it to the DOM whereas JQuery append creates that node for you and adds it to the DOM right away whether it's a text element or an html element or a combination!

$('p').append('<span> I have been appended </span>');

7

appendChild is a DOM vanilla-js function.

append is a jQuery function.

They each have their own quirks.

1
  • This answere is outdated! Look at @Sagar V 's answer for an up to date explanation. Jan 4 at 9:51
1

The JavaScript appendchild method can be use to append an item to another element. The jQuery Append element does the same work but certainly in less number of lines:

Let us take an example to Append an item in a list:

a) With JavaScript

var n= document.createElement("LI");                 // Create a <li> node
var tn = document.createTextNode("JavaScript");      // Create a text node
n.appendChild(tn);                                   // Append the text to <li>
document.getElementById("myList").appendChild(n);  

b) With jQuery

$("#myList").append("<li>jQuery</li>")
0

appendChild is a pure javascript method where as append is a jQuery method.

0

I thought there is some confusion here so I'm going to clarify it.

Both 'append' and 'appendChild' are now native Javascript functions and can be used concurrently.

For example:

let parent_div = document.querySelector('.hobbies');
let list_item = document.createElement('li');
list_item.style.color = 'red';
list_item.innerText = "Javascript added me here"

//running either one of these functions yield same result
const append_element = parent_div.append(list_item);
const append_child_element = parent_div.appendChild(list_item);

enter image description here

However, the key difference is the return value

e.g


console.log(append_element) //returns undefined

whereas,

console.log(append_child_element) // returns 'li' node

Hence, the return value of append_child method can be used to store it in a variable and use it later, whereas, append is use and throw (anonymous) function by nature.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.