The HTML DOM Heading object is associated with the HTML heading elements ranging from

to

. Using the heading object we can create and access heading element with the createElement() and getElementById() method respectively.

Syntax

Following is the syntax for ?

Creating a Heading object ?

var p = document.createElement("H1");

Example

Let us look at an example for the Heading object ?

Heading object example
Create a h1 element by clicking the below button
CREATE

Output

This will produce the following output ?

On clicking the CREATE button ?

In the above example ?

We have first created a button CREATE that will execute the headerCreate() method when clicked by the user ?

CREATE

The CreateH1() method creates an

heading element using the createElement() method on document object and assigns it to variable h. We then create a text node for it using the createTextNode() method of the document object. The text node is appended to the

element using the appendChild() method. Finally the

element along with the text node are appended as child of the document?s body using the appendChild() method ?

function createH1() {
   var h = document.createElement("H1");
   var txt = document.createTextNode("H1 element has been created");
   h.appendChild(txt);
   document.body.appendChild(h);
}