DOM: .appendChild

By Xah Lee. Date: . Last updated: .

node.appendChild(new_node)

Append new_node as a child to node, but also remove new_node from its original parent (if it has one), if both are in the same document.

Return the appended new_node.

// get first paragraph
const fp = document .getElementsByTagName("p")[0];

// move it to bottom of body
document .body.appendChild(fp);

You can copy the above code and test it in browser console.

Copy and Append Node

To stop it from moving, you can make a clone first.

// get first paragraph
const fp = document .getElementsByTagName("p")[0];

// clone and add it to bottom of body
document .body.appendChild(fp.cloneNode(true));

Note: cloneNode makes a copy.

back to DOM: Basic DOM Methods

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog