Hello reader's in this blog we will discuss about creating a new element and appending to the end of the page. Some time you need to add a new element to the end of the page. We use the appendChild method to append the new element inside the page.

Syntax:-

var bdy = document.getElementsByTagName("body")[0]; // body element
var newDiv = document.createElement("div");
// append to body
bdy.appendChild(newDiv);

We use a DOM getElementsByTagName method for accessing the top level page element , for appending the new element to the end of the page. We get the individual array because this method always returns an array.

Syntax:-

var bdy = document.getElementsByTagName("body")[0];

When we get a parent element, the appendChild method will append the new element at the end of the parent element. It take one parameter that is the newly created element.

If we need to find a parent of the existing element that is a sibling toh the new element we use :-

Syntax:-

var bdy = document.getElementById("div1").parentNode;

The new element is appended as a sibling of the existing element and in the document tree at the same level, that is ensured by the sibling parent approach.

Hence, this tutorial will help you to append the element in the web page.