Javascript Reference - HTML DOM Heading Object

The Heading object represents an HTML heading element: <h1> to <h6>.

Heading Object Properties

Property	Description
align	Not supported in HTML5. Use style.textAlign instead. Sets or gets the value of the align attribute of the heading element

Standard Properties and Events

The Heading object supports the standard properties and events.

Example

We can access a heading element by using getElementById().


<!DOCTYPE html>
<html>
<body>
<h2 id="myHeading">This is a h2 element.</h2>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--  w  w w  . ja va2  s  .c o m-->
    var x = document.getElementById("myHeading");
    x.style.color = "blue";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

We can create a heading element by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<!--   w ww  . j  a v a2  s .c o  m-->
<script>
function myFunction() {
    var x = document.createElement("H1");
    var t = document.createTextNode("hi");
    x.appendChild(t);
    document.body.appendChild(x);
}
</script>

</body>
</html>

The code above is rendered as follows: