HTML - DOM createElement() Method

Quiz

The HTML DOM createElement() method is used for creating an HTML element specified by tag name or element name, if the tag name is not recognized then an HTML Unknown Element is created.

The following interactive example demonstrate the usage of the createElement() method for different scenarios −

HTML DOM createElement() Method

Welcome to Tutorialspoint

You are at the right place to learn.... Visit for more

If you click the "Create p Element" button, a new <p> element will be created.
If you click the "Create List" button, a new "list" element will be created.
If you click the "Create Button Element" button, a new "button" element will be created.

Syntax

Following is the syntax of the HTML DOM createElement() method −

document.createElement(tagname);

Parameters

This method accepts a single parameter as listed below −

Parameter	Description
tagname	It is a required parameter which represents the type of element to be created.

Return Value

It returns the newly created element node.

Example 1: Create "Button" and "hr" Element

The following example demonstrates the usage of the HTML DOM createElement() method. It creates the "button" and "hr" elements within the document −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM createElement() Method</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<p>Click to get more buttons</p>
<button onclick="fun()">Click me</button><br><br>
<script>
   let i = 0;
   function fun() {
      i++;
      let btn = document.createElement("button");
      btn.innerHTML = "button" + i;
      let hr = document.createElement("hr");
      document.body.appendChild(btn);
      document.body.appendChild(hr);
   }
</script>
</body>
</html>

Example 2: Create Paragraph ("p") Element

Following is another example of the HTML DOM createElement() method. We use this method to create a "p" element and then append it to the <body> −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM createElement() Method</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
   <p>Click to get more Paragraphs</p>
   <button onclick="fun()">Click me</button><br><br>
   <script>
      let i = 0;
      function fun() {
         i++;
         let txt = document.createElement("p");
         txt.innerHTML = "I am Paragraph number " + i;
         document.body.appendChild(txt);
      }
   </script>
</body>
</html>

Example 3: Create Paragraph ("p") Element and append to <div>

In the following example, a <p> element is created using the createElement() method, and later it is appended to<div>element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM createElement() Method</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<p>Click to get more Paragraphs</p>
<button onclick="fun()">Click me</button><br><br>
<div id="ids"></div>
<script>
   let i = 0;
   function fun() {
      i++;
      let txt = document.createElement("p");
      txt.innerHTML = "I am Paragraph number " + i;
      document.getElementById("ids").appendChild(txt);
   }
</script>
</body>
</html>

Supported Browsers

Method
createElement()	Yes 1	Yes 12	Yes 1	Yes 1	Yes 6

html_dom.htm

Print Page