HomeTutorsContact

How to create elements dynamically in Javascript?

By Gulshan Saini
Published in JavaScript
May 28, 2020
1 min read

Browsers parse the HTML document and construct the nodes based on the contents of the HTML file. All nodes are created by the browser for the initial load. However, it is possible to dynamically inject new nodes using the document.createElement() method.

Create element dynamically inside document body

document.createElement accepts tagName as mandatory argument. A tagName can be any valid tag like div, h1, p etc. If tag name is not recognized by browser, it creates element of HTMLUnknownElement type.

Syntax

Let’s see how this work

Creating div element

To create a div element the tagName is going to have a value of div as follows

We have created an element however it will not be visible on the document as of now. To make the newly created element visible on the page we need to

  • enter some content in it
  • append it to document body or an existing element

To enter some content and append the new element on-page, first, we need to get the reference of the element - let’s assign it to variable divElement

Next, we create a text node to give it some content. To create text node we use another method i.e. document.createTextNode which accepts text as an argument

To display text inside div element, we need to append it to div element using appendChild method defined inside DOM Node interface

Finally, we can attach the div element to the document body to make it visible on the screen

Output

Create element dynamically inside another element

Inserting dynamic element inside existing element work very much similar to appending it to the body.

Let’s start with the following markup to insert the dynamic element inside the existing element

Next, we will append a paragraph element having text “50% off on the above items!!”

Let’s create paragraph element with above text inside it

Now, we need to get the handle of an element where we need to append the newly created paragraph element - I have given the target element an id of parent so that we can easily access it. We will be using document.querySelector() method to select the desired element.

So, once we have the handle of the parent element, we can use appendChild to insert item(s) at last inside the target element.

Complete code

Output

Summary

  • The document.createElement() creates a new HTML element.
  • The document.createTextNode() creates a text node.
  • The appendChild() method appends dynamic element to body or target element.
  • The document.querySelector() allows to select desired element using any valid selector.

Tags

#dom-manipulation
Previous Article
How to get device memory using JavaScript?

Gulshan Saini

Fullstack Developer

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to iterate through NodeList using Javascript?

July 09, 2020
1 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media