Nearby lessons

12 of 14

JavaScript HTML DOM Elements (Nodes)

๐Ÿ“Œ What are DOM Nodes?

JavaScript allows you to dynamically create, remove, or replace HTML elements (nodes) in the DOM. These operations are useful when building interactive applications that update the page without reloading it.

๐Ÿ†• Creating New HTML Elements (Nodes)

You can create a new element using document.createElement() and then append it using appendChild().

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ“Œ Creating new HTML Elements - insertBefore()

Use insertBefore() to insert a new node before an existing child node.

parent.insertBefore(newNode, existingNode)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

โŒ Removing Existing HTML Elements

You can remove an element using element.remove().

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ‘ถ Removing a Child Node

To remove a specific child node, use parent.removeChild(child).

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ” Replacing HTML Elements

You can replace an existing child node with another using parent.replaceChild(newNode, oldNode).

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿง  Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!JavaScript DOM Collections