Manipulating Elements in DOM

1. createElement() – create a new element and returns a new Node with the Element type.

Syntax

let element = document.createElement(htmlTag);

2. appendChild()  – append a node to a list of child nodes of a specified parent node.

Syntax

parentNode.appendChild(childNode);

3. textContent – get and set the text content of a node.

Syntax

let text = node.textContent;

 4. innerHTML – get and set the HTML content of an element.

Syntax

let content = element.innerHTML;

element.innerHTML = newHTML;

5. insertBefore() and after – insert a new node before/after an existing node as a child node of a specified parent node.

Syntax

parentNode.insertBefore(newNode, existingNode);

6. replaceChild() – replace a child element by a new element.

Syntax

parentNode.replaceChild(newChild, oldChild);

7. removeChild() – remove child elements of a node.

Syntax

let childNode = parentNode.removeChild(childNode);