Adds one or more nodes or strings to the end of a parent element.
Adds a single node to the end of a parent element.
Can Append Text?
โ Yes, can append both text and elements.
โ No, only Node elements can be appended.
Multiple Arguments?
โ Yes, can append multiple nodes/strings at once.
โ No, can only append one node at a time.
Return Value
โ Returns undefined.
โ Returns the appended node.
Works with Document Fragments?
โ Yes.
โ Yes.
Browser Support
โ Modern browsers (ES6+).
โ All browsers (Older & Modern).
๐น Example Code
const div = document.getElementById("example");
// Using append()
div.append("Hello ", document.createElement("span"));
// โ Appends both text and a span element
// Using appendChild()
const span = document.createElement("span");
span.textContent = "World!";
div.appendChild(span);
// โ Cannot append text directly
๐ฏ Key Differences
Scenario
Use
Adding both text and elements
โ append()
Adding only elements
โ appendChild()
Appending multiple elements at once
โ append()
Ensuring compatibility with old browsers
โ appendChild()
๐ Best Practice: Use append() if you need to add both text and elements, otherwise, appendChild() works fine.
