Tutorials Tonight's Logo

Create Element In JavaScript With Practical Examples


In this tutorial, you will learn how to create an element in JavaScript and append it to any element of the webpage with various different examples.

What comes to your mind when you think about creating an interactive webpage?

A webpage is interactive when the user engages is actively engaged with contents, elements and the functionality of the webpage.

One of the main tasks that are done by an interactive webpage is creating a new element and filling it with data and design, like showing some popup, creating animating element, etc.

Let's see how you can create an HTML element using javascript and append it anywhere within the webpage.

JavaScript createElement

To create an element using JavaScript use the createElement() method of the document object.

The tag name of the HTML element that you want to create is passed as an argument to the createElement() method.

document.createElement("P");

The above code creates a <p> element.

The method also returns the reference to the newly created element which you can store to be used later.

let element = document.createElement("P");

Now your element is created and a reference of which is stored in a variable named element.

But, this newly created element is floating aimlessly in the document, you have to stitch it to somewhere in the body to be seen or used.

append element in javascript

Append Element JavaScript

The newly created element has no role in the document, by appending an element to the body or to some element you make the element a part of the webpage.

To append any element to some other element (also called parent) use the append() method with the parent element.

Pass the reference of the element in the append() method.

parentElement.append(element);

Now the element is appended to the 'parentElement' as its last child and becomes part of the document.

Here is a complete working example:

Working example

let parentElement = document.body; // selecting parent element
let element = document.createElement("P");
// adding a textNode to the element
element.innerHTML = "This paragraph element is created by javascript.";
parentElement.append(element);
append element to parent element

Append element using the appendChild method

There is another method in javascript to append an element to the parent element, it is the appendChild() method.

Difference between append() and appendChild() methods are:

  1. append() method let you append the DOMString string also, whereas appendChild() only append Node object.
  2. append() method returns nothing, whereas appendChild() method returns the appended Node.
  3. append() method can append multiple Node or string, whereas appendChild() can append only one node.

Example appendChild

let parentElement = document.body; // selecting parent element
let element = document.createElement("P");
// adding a textNode to the element
element.innerHTML = "New paragraph created by javascript.";
parentElement.appendChild(element);


Create element with class

To create an element with a class, simply create an element using createElement and use classList or className property to add a class to a newly created element.

In the example below whenever a button is clicked, it creates a new element and add class using javascript.

Example

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Article - create element with class</title>
  <style>
    .box {
      padding: 10px;
      color: white;
      font-size: 20px;
      background-color: teal;
      animation: music 2s infinite;
    }

    @keyframes music {
      0% {
        width: 100%
      }

      50% {
        width: 50%
      }

      100% {
        width: 100%
      }
    }
  </style>
</head>

<body>
  <h2>Create new element and add class to it.</h2>
  <button onclick="createAndAppend()">Create element and add class</button>

  <script>
    function createAndAppend() {
      let parentElement = document.body;
      let element = document.createElement("P");
      element.innerHTML = "New paragraph with 'box' named class.";
      element.classList.add("box");
      parentElement.appendChild(element);
    }
  </script>
</body>

</html>

Create element with id

The id property of an element is used to get and set the id of an element.

To create an element with an id use createElement to create an element and assign an id to element.id.

In the example below whenever the button is clicked it create an element and add a unique id to it.

Example

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Article - create element with id</title>
  <style>
    [id*="id"] {
      padding: 10px;
      color: white;
      font-size: 20px;
      background-color: teal;
      animation: piano 2s infinite;
    }

    @keyframes piano {
      0% {
        width: 100%
      }

      50% {
        width: 50%
      }

      100% {
        width: 100%
      }
    }
  </style>
</head>

<body>
  <h2>Create new element and add uinque id to it.</h2>
  <button onclick="createAndAppend()">Create element and add unique id</button>

  <script>
    let count = 1;
    function createAndAppend() {
      let parentElement = document.body;
      let element = document.createElement("P");
      element.id = "id" + count;
      element.innerHTML = "New paragraph with id = " + element.id;
      parentElement.appendChild(element);
      count++;
    }
  </script>
</body>

</html>

Create element with attributes

When you create elements like image then you need to specify it attributes like src, alt, title, etc.

Let's see how to create an element with the attribute:

Example

let parentElement = document.body;
let element = document.createElement("IMG");
element.setAttribute("src", "https://i.imgur.com/Rnj7kZj.jpeg");
element.setAttribute("alt", "latest picture of pluto");
element.setAttribute("title", "latest picture of pluto");
parentElement.appendChild(element);

The setAttribute method accepts 2 arguments, first is the name of the attribute and the second is the value of the attribute.


Points to remember:

  1. Use the createElement method to create a new element.
  2. You can pass the HTML tag name in the createElement method in small, capital or in mixed case. The method converts it to small later.
  3. To append a newly created element to a parent element you can use the append or appendChild method.
Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.