Insert an Element into the Body tag using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jan 9, 2022

banner

Check out my new book

Insert an Element into the Body tag using JavaScript #

To insert an element into the body tag:

  1. Create an element using the document.createElement() method.
  2. Use the document.body property to get access to the body element.
  3. Call the appendChild() method on the body, passing it the element as a parameter.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box" style=" background-color: salmon; color: white; width: 150px; height: 150px; " > Box Content </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const div1 = document.createElement('div'); div1.innerHTML = `<span style="background-color: lime;">Last element</span>`; // ✅ Insert element as last in body document.body.appendChild(div1); const div2 = document.createElement('div'); div2.innerHTML = `<span style='background-color: pink;'>First element</span>`; // ✅ Insert element as first in body document.body.insertAdjacentElement('afterbegin', div2);

We used the document.createElement method to create 2 div elements.

The only parameter we passed to the method is the type of element to be created.

We assigned innerHTML to each div before inserting the elements into the body.

The appendChild method adds a node as the last child to the element it was called on.

We called the method on the document.body property to append the div as the last child of the body element.

The second example uses the insertAdjacentElement method.

index.js
const div2 = document.createElement('div'); div2.innerHTML = `<span style='background-color: pink;'>First element</span>`; // ✅ Insert element as first in body document.body.insertAdjacentElement('afterbegin', div2);

The method takes the following 2 parameters:

  • position - the position relative to the target element of where the passed in element should be inserted. Can be one of the following:

    • beforebegin - before the target element itself.
    • afterbegin - just inside the target element, before its first child.
    • beforeend - just inside the target element, after its last child.
    • afterend - after the target element itself.
  • element - the element to be inserted into the tree.

In the example we inserted the div just inside of the body element, before its first child, however you can change the position depending on your use case.

The insertAdjacentElement method can be called on any DOM element, it doesn't have to be the body element.

You might need to select a different element if you need to use the beforebegin or afterend values for the position parameter.

If I open the example from the code snippet in my browser, I can see that the elements were inserted into the body tag.

elements inserted into body

And here is a screenshot of how the elements appear on the screen.

elements in body layout

Use the search field on my Home Page to filter through my more than 3,000 articles.