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.
