Code has been added to clipboard!

Learn How to Use JavaScript Create Element Functions

Reading time 4 min
Published Aug 8, 2017
Updated Oct 2, 2019

To become fully capable of manipulating DOM elements, you should be aware of the methods used to add, remove, modify, and replace nodes.

In this tutorial, you will learn all about handling nodes and JavaScript create element functions. You will understand how to use insertBefore and appendChild JavaScript methods, as well as how to replace and remove nodes. We will also show you how document.getElementById can append a new element to a parent element.

JavaScript HTML DOM Element Nodes: Main Tips

  • The HTML DOM allows you to add and remove nodes through JavaScript.
  • JavaScript create element action can be done when you add an element to the HTML DOM. You will have to create element JavaScript (element node) first, then append it to an element that already exists.
  • There are specific methods used to create, remove, and replace node elements.

Element Nodes

JavaScript create element action is considered done when you create an element node, and then append it to an element that already exists:

Example
var newPara = document.createElement("p");
var textNode = document.createTextNode("Unexpected text!");
newPara.appendChild(textNode);

var newElement = document.getElementById("parent");
newElement.appendChild(newPara);

Example Explained

The code example below can be used to make JavaScript create element called <div>:

Example
var element = document.createElement("div");

In order to add some text to the newly created element, you have to create a text node:

Example
var textNode = document.createTextNode("Unexpected text!");

Now, you can append the text to the newly created <div> element:

Example
element.appendChild(textNode);

Then, you need to append the newly created element to the parent element. You can perform this task by using document.getElementById method:

Example
var newElement = document.getElementById("parent");

Lastly, you need to append your new element to an existing parent element - the <div> parent:

Example
newElement.appendChild(newPara);

Working with HTML Elements

Let's now review working with HTML documents step by step. First, we will explain how to create them. Then, we will show you how your creations can be removed or replaced. Follow the code examples to make sure you get the idea every time.

Creating

In our previous example, the method called appendChild() was used to append the new element as the last child of the parent element. JavaScript create element action can also be performed with the insertBefore() method, which is used to insert a new element above some selected one.

Take a look at the last line of code in the example below: newElement.insertBefore(newPara, newChild);.

In the parentheses, we first indicated the name of the element we want to insert (our newly created newPara), and then defined the element above which we want the new element to be inserted (newChild):

Example
var newPara = document.createElement("p");
var textNode = document.createTextNode("Unexpected Text!");
newPara.appendChild(textNode);

var newElement = document.getElementById("parent");
var newChild = document.getElementById("child1");
newElement.insertBefore(newPara, newChild);

Removing

If you want to delete the elements created with appendChild JavaScript method, you can remove elements by using the removeChild() method:

Example
var nodeParent = document.getElementById("parent");
var nodeChild = document.getElementById("child1");
nodeParent.removeChild(nodeChild);

The following HTML contains a single <div> element along with two child nodes, which are both <p> elements:

Example
<div id="parent">
    <p id="child1">Text.</p>
    <p id="child2">More text.</p>
</div>

This code will find the element with the id="parent" attribute:

Example
var nodeParent = document.getElementById("parent");

Now, this code will find the <p> element with the id="child1" attribute:

Example
var nodeChild = document.getElementById("child1");

We can now remove the child element by using the removeChild() method on the already located parent element. In the parentheses, we pass the variable name of the child element to be removed:

Example
nodeParent.removeChild(nodeChild);

There is another way of accomplishing the same task: first, we find the child to be removed, then use the parentNode property to find the child element's parent. Finally, we use the removeChild() method with the child to be removed passed in the parentheses:

Example
var nodeChild = document.getElementById("child1");
nodeChild.parentNode.removeChild(nodeChild);

Replacing

You can replace elements in the HTML DOM by using the replaceChild() method.

See the last line of the example provided below: nodeParent.replaceChild(newPara, nodeChild);.

Here, we use the replaceChild() method on the parent node by passing it in the parentheses first as the new node to be inserted, and indicating the old node to be removed second:

Example
var newPara = document.createElement("p");
var textNode = document.createTextNode("Unexpected Text!");
newPara.appendChild(textNode);

var nodeParent = document.getElementById("parent");
var nodeChild = document.getElementById("child1");
nodeParent.replaceChild(newPara, nodeChild);

JavaScript HTML DOM Element Nodes: Summary

  • You can create a new node using both methods appendChild() and insertBefore().
  • You can remove a node using removeChild() method.
  • You can replace a node using replaceChild() method.
What Is JavaScript Used For?
Tutorial
Introduction
Output
Syntax
Comment
Commands
Operators
Comparison and Logical Operators
Data Types
Math.random()
Type Conversion
Function Definitions
Events
Objects
Object Properties
Prototype
Array
Sorting Arrays
Strings
Numbers
Number Format
Math Object
Onclick Event
Date
Date Formats
Scope
Regular Expressions
Reserved Words
Common Mistakes
Performance
Forms
Form Validation
Window: The Browser Object Model
Popup Boxes
Cookies
JSON
AJAX Introduction
AJAX Form
Automatic File Download
Functions
Array Methods
String Methods
Date Methods
Timing Events
Cheat Sheet
JavaScript in HTML
HTML DOM Methods
HTML DOM Changing HTML
HTML DOM Animation
HTML DOM EventListener
HTML DOM Navigation
HTML DOM NodeList
HTML DOM Element Nodes
Array Functions
Boolean
Calling a Function
Date Functions
Global Objects
Input Text
Operator
Statements
String Functions
Math
Math.random
Number
RegEx
alert
array.filter
array.length
array.map
array.reduce
array.push
array.sort
break and continue
className
confirm
decodeURIComponent
for
forEach
if
indexOf
innerHTML
location.reload
number.toString
onclick
onload
parseInt
prompt
replace
setAttribute
setInterval
setTimeout
slice
splice
string.includes
string.indexOf
string.split
style.display
submit
substr
substring
switch
test
throw, try and catch
toLowerCase
toUpperCase
use strict
while
window.history
window.location
window.navigator
window.screen