HTML DOM Footer object

HTMLWeb DevelopmentFront End Technology

The HTML DOM Footer object is associated with the HTML <footer> element. The <footer> element is a type of semantic tag and introduced in the HTML5. Using the Footer object we can create and get the <footer> element using the createElement() and getElementById() method respectively.

Syntax

Following is the syntax for −

Creating a footer object −

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

Example

Let us look at an example of the Footer object −

Live Demo

<!DOCTYPE html>
<html>
<head>
<script>
   function createFoot() {
      var f = document.createElement("FOOTER");
      document.body.appendChild(f);
      var p = document.createElement("P");
      var txt = document.createTextNode("Copyright ©, 2019");
      p.appendChild(txt);
      f.appendChild(p);
   }
</script>
</head>
<body>
<h1>Footer object example</h1>
<p>Create a footer for this webpage by clicking the below button</p>
<button onclick="createFoot()">CREATE</button>
</body>
</html>

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 createFoot() method on being clicked by the user.

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

The createFoot() method creates a footer element using the createElement() method of the document object. We then append the footer element to the document body using the appendChild() method and create another <p> element using the createElement() method.

A text node is then created using the createTextNode() method of the document object. The text node is then appended to the paragraph using the appendChild() method on the paragraph. Finally the paragraph along with the text node are appended as children of the footer element using the appendChild() method on the footer element −

function createFoot() {
   var f = document.createElement("FOOTER");
   document.body.appendChild(f);
   var p = document.createElement("P");
   var txt = document.createTextNode("Copyright ©, 2019");
   p.appendChild(txt);
   f.appendChild(p);
}
raja
Published on 19-Aug-2019 07:55:16
Advertisements