What does createelement do in javascript?

Question

1,011

Table of Contents Show

Using Just createElement()
Object.Assign()
ES 6 Backticks
What does createElement () do?
What does document createElement (' a ') return?
Should I use innerHTML or createElement?
What are the main benefits of using createElement over innerHTML?

Learn how to create html element in JavaScript in a few different ways

Using just createElement()
Object.assign()
ES6 Backticks

Using Just createElement()

Create a div HTML Element in JavaScript by calling the createElement() method on the document object.

This method takes an argument which will be the HTML Element.

In this case…div.

const box = document.createElement("div");
box.id = "box";
document.body.appendChild(box);

Assign it to the constant called box.

Set the id property of box to ‘box‘.

Add it to the DOM hierarchy by calling appendChild() on the document.body object with an argument box.

Let’s add a child element to the box element.

To do that, create a button HTML Element in JavaScript by calling the createElement() method on the document object.

This method takes an argument…

but this time, button.

Assign it to the constant called button.

Add text to the button element by setting a string value to the innerHTML property of it.

Append the button element to the DOM hierarchy by calling the appendChild() method on the document.body object with button as an argument.

To add an ID attribute to the button, set a string value to the id property of button.

const button = document.createElement('button');
button.innerText = 'Button';
button.id = 'button-1';
box.appendChild(button);

Finally, add the button element to the box element.

Call the appendChild() method on the box by passing button as an argument.

Try it out! ⛹️

See the Pen Create HTML Element in JavaScript by Raja Tamil (@rajarajan) on CodePen.

Object.Assign()

Learn how to create the same HTML Elements using Object.assign()

Call the assign() method on the object inside appendChild().

Assign method takes two arguments:

HTML DOM Element that we want to create
A JavaScript object in which we can use any of the DOM properties such as id, innerHTML, etc.

document.body.appendChild(
  Object.assign(
    document.createElement('div'),
    { id : 'box'}
  )
)

This is easier than the previous approach if we have a lot properties.

In order to add a child element to the box element, all we have to do is just chain another appendChild() with a button element.

Which is easier and more readable than the first approach.

document.body
  .appendChild(
  Object.assign(
    document.createElement('div'),
    { id:'box'}
  )
).appendChild(
  Object.assign(
    document.createElement('button'),
    { innerHTML : 'button' ,
      id:'button-1'
    }
  )
)

Try it out! ⛹️

See the Pen Create HTML Element in JavaScript – 2 [EMBED] by Raja Tamil (@rajarajan) on CodePen.

ES 6 Backticks

Learn how to add the same HTML Elements to the DOM hierarchy using ES6 back-ticks which is by far the easiest.

Because, you can literally write HTML code inside JavaScript which is super easy to read and maintain.

Create a constant called box and add a pair of back-ticks. Write your HTML code exactly as you do inside the HTML page.

const box = `
  <div id='box'>
    <button id='button-1'>Button</button>
  </div>`;

document.body.innerHTML = box;

Assign it to the innerHTML property of the document.body.

That’s it.

Try it out! ⛹️

See the Pen Create HTML Element in JavaScript – 3 [EMBED] by Raja Tamil (@rajarajan) on CodePen.

The HTML DOM createElement() method is used for creating an HTML element dynamically using JavaScript. It takes the element name as the parameter and creates that element node. You need to use the appendChild() method to have the newly created element as part of DOM .

Syntax

Following is the syntax for createElement() method −

document.createElement(nodename)

Example

Let us look at an example for the createElement() method −

Live Demo

<!DOCTYPE html>
<html>
<body>
<h2>createElement() example</h2>
<p>Click the below button to create more buttons</p>
<button onclick="createButton()">CREATE</button>
<br><br>
<script>
   var i=0;
   function createButton() {
      i++;
      var btn = document.createElement("BUTTON");
      btn.innerHTML="BUTTON"+i;
      var br= document.createElement("BR");
      document.body.appendChild(btn);
      document.body.appendChild(br);
   }
</script>
</body>
</html>

Output

This will produce the following output −

On clicking the CREATE button three times. One click for one button −

In the above example −

We have created a button CREATE that will execute the createButton() method on being clicked by the user.

<button onclick="createButton()">CREATE</button>

The createButton() function creates a <button> element using the createElement() method of the document object. Using the innerHTML, we set the text that will be displayed on the top of the button. We create another element <br> using the createElement() method of the document object. The <button> element and the <br> element are then appended to the document body using the appendChild() method −

var i=0;
function createButton() {
   i++;
   var btn = document.createElement("BUTTON");
   btn.innerHTML="BUTTON"+i;
   var br= document.createElement("BR");
   document.body.appendChild(btn);
   document.body.appendChild(br);
}

Updated on 20-Feb-2021 05:42:40

Related Questions & Answers
HTML DOM insertAdjacentElement( ) Method
HTML DOM insertAdjacentHTML( ) Method
HTML DOM insertAdjacentText( ) Method
HTML DOM insertBefore( ) Method
HTML DOM isDefaultNamespace( ) Method
HTML DOM isEqualNode( ) Method
HTML DOM isSameNode( ) Method
HTML DOM item( ) Method
HTML DOM appendChild() Method
HTML DOM blur() Method
HTML DOM addEventListener() Method
HTML DOM querySelector() Method
HTML DOM querySelectorAll() Method
HTML DOM removeChild() Method
HTML DOM removeAttribute() Method

What does createElement () do?

createElement() In an HTML document, the document. createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.

What does document createElement (' a ') return?

The nodeName of the created element is initialized to the elementName value. The document. createElement() returns the newly created element. Example 1: This example illustrates how to create a <p> element.

Should I use innerHTML or createElement?

#1) createElement is more performant However, using the innerHTML causes the web browsers to reparse and recreate all DOM nodes inside the div element. Therefore, it is less efficient than creating a new element and appending to the div.

What are the main benefits of using createElement over innerHTML?

5 Answers.

Preserves existing references to DOM elements when appending elements. When you append to (or otherwise modify) innerHTML , all the DOM nodes inside that element have to be re-parsed and recreated. ... .

Preserves event handlers attached to any DOM elements. ... .

Could be simpler/faster in some cases..

kode javascript Insert HTML JavaScript innerHTML Remove id JavaScript Dom javascript element