JavaScript Introduction | Document Object Model | Managing Nodes

Adding Nodes

The following methods can be used to add a new node at a specific position.

1. appendChild()
2. insertBefore()
3. insertData()

appendChild() Method

The appendChild() method adds a new node to the end of the child node list of the corresponding node.

function appendNode() {
    var parent = document.getElementById("list");  // Selects the element whose id is "list".
    var newItem = document.getElementById("item"); // Selects the element whose id is "item".
    parent.appendChild(newItem);                   // Adds it as the last child node of the element.
}

insertBefore() Method

The insertBefore() method adds a new node immediately before a specific child node.

The form of the insertBefore() method is as follows.

Form

parentNode.insertBefore(newChildNode, referenceChildNode);

1. New child node: Passes the child node to add newly to the child node list.
2. Reference child node: The node used as the reference when inserting the new node. The new node is added immediately before this node.

function appendNode() {
    var parent = document.getElementById("list");           // Selects the element whose id is "list".
    var criteriaItem = document.getElementById("criteria"); // Selects the element whose id is "criteria".
    var newItem = document.getElementById("item");          // Selects the element whose id is "item".
    parent.insertBefore(newItem, criteriaItem); // Adds the node immediately before the reference child node.
}

If null is passed as the reference child node, the new node is added as the last node in the child node list.
In other words, it behaves exactly the same as appendChild().

insertData() Method

The insertData() method adds new text to the text data of a text node.

The form of the insertData() method is as follows.

Form

textNode.insertData(offset, newData);

1. Offset: The offset value starts at 0 and indicates from which position in the existing text data the new data will be added.
2. New data: Passes the text data to insert newly.

var text = document.getElementById("text").firstChild; // Selects the text node of the element whose id is "text".
function appendText() {
    text.insertData(6, " 나른한 "); // Adds the text " 나른한 " starting from the sixth character of the text node.
}

Creating Nodes

Depending on the type of node to create, the following methods can be used.

1. createElement()
2. createAttribute()
3. createTextNode()

Creating Element Nodes

You can create a new element node by using the createElement() method.

function createNode() {
    var criteriaNode = document.getElementById("text"); // Selects the element whose id is "text" as the reference element.
    var newNode = document.createElement("p");          // Creates a new <p> element.
    newNode.innerHTML = "새로운 단락이다.";
    document.body.insertBefore(newNode, criteriaNode);  // Adds the new element immediately before the reference element.
}

Creating Attribute Nodes

You can create a new attribute node by using the createAttribute() method.

If an attribute node with the same name already exists, the existing attribute node is replaced by the new attribute node.
When you want to create an attribute node on an already existing element node, you can use the setAttribute() method.

function createNode() {
    var text = document.getElementById("text");           // Selects the element whose id is "text".
    var newAttribute = document.createAttribute("style"); // Creates a new style attribute node.
    newAttribute.value = "color:red";
    text.setAttributeNode(newAttribute);                  // Adds it as an attribute node of the element.
}

Creating Text Nodes

You can create a new text node by using the createTextNode() method.

function createNode() {
    var elementNode = document.getElementById("text");           // Selects the element whose id is "text".
    var newText = document.createTextNode("새로운 텍스트에요!"); // Creates a new text node.
    elementNode.appendChild(newText);                            // Adds it as a child node of the element.
}

Removing Nodes

The following methods can be used to remove a specific node.

1. removeChild()
2. removeAttribute()

removeChild() Method

The removeChild() method removes a specific child node from the child node list.

When this method successfully removes a node, it returns the removed node.
When a node is removed, all child nodes of the removed node are also removed together.

var parent = document.getElementById("list");      // Selects the element whose id is "list".
var removedItem = document.getElementById("item"); // Selects the element whose id is "item".
parent.removeChild(removedItem);                   // Deletes the specified element.

removeAttribute() Method

The removeAttribute() method removes a specific attribute node by using the attribute name.

var text = document.getElementById("text"); // Selects the element whose id is "text".
text.removeAttribute("style");              // Removes the "style" attribute from that element.

Cloning Nodes

You can clone a specific node by using the cloneNode() method.

cloneNode() Method

The cloneNode() method creates and returns a new node that is exactly the same as an existing node.

The form of the cloneNode() method is as follows.

Form

nodeToClone.cloneNode(whetherToCloneChildNodes);

• Whether to clone child nodes: If the passed value is true, all attribute nodes and child nodes of the cloned node are also cloned. If false, only attribute nodes are cloned and child nodes are not cloned.

function cloneElement() {
    var parent = document.getElementById("list");     // Selects the element whose id is "list".
    var originItem = document.getElementById("item"); // Selects the element whose id is "item".
    parent.appendChild(originItem.cloneNode(true));   // Clones the node and adds it to the end of the list.
}