Creating Nodes

One of the most powerful abilities that the DOM API provides is the ability to create new nodes, which can then be inserted into the DOM.  New nodes can be created from existing ones (clones) or from scratch.  Below we discuss a method that allows us to clone an existing node and methods for creating new element and text nodes from scratch.

Note: A newly created node is not immediately visible. It must be added to the DOM in order to become visible.  We discuss adding nodes to the DOM in the next tutorial.

Node.cloneNode()

The cloneNode(deep) method takes a Boolean value as an argument and returns an exact clone of the node on which it’s called.  If the Boolean argument is true then a deep copy is performed.

var button = document.getElementById("red-button");
var clone = button.cloneNode(true);

Document.createElement()

The createElement(tagName) method takes a tag name in a string as an argument and returns a new element node representing an HTML element of the type specified in the string.

var div = document.createElement(“div”);

Document.createElementNS()

The createElementNS(namespaceURI, tagName) method takes a namespace URI and a tag name.  This method can be used to create SVG elements whose element names are in the namespace defined at http://www.w3.org/2000/svg.

var ns = "http://www.w3.org/2000/svg";
var circle = document.createElementNS(ns, "circle");
circle.setAttribute("r", 20);
circle.setAttribute("cx", 10);
circle.setAttribute("cy", 100);
circle.setAttribute("fill", "blue");

Document.createTextNode()

The createTextNode(text) method takes a string as an argument and returns a new text node having its nodeValue property set to the string passed in as an argument.

var greeting = document.createTextNode("Welcome to the Jungle");