How to add an element after the opening body tag on an empty HTML page?

Hello my friends:

I have an HTML page containing only a body tab, no other elements.


<!DOCTYPE html>
<title>Title of the document</title>
<!--Add element here-->

I am having trouble because there are no siblings, which would allowed me to use available methods:

I need to place a tag in the body using an event handler.

Thank you!

I’m confused. Do you need to place it IN the body, or AFTER the body tag? Because you ask for both.

Are you using jQuery in this? Or vanilla JS?

off the top of my hat the shortest method I can come up with:

window.onload = function (evt) {
    document.body.innerHTML = '<strong>boo!</strong>';

Vanilla JS! No JQuery.

I want to put the element after the body tag.


<p>I am the new tag</p>

In the interest of learning, is there an alternative way to do this without using innerHTML?


yes - you can use the hundreds of different document object model commands that make up a significant fraction of the commands available in JavaScript.

Gees, that is a bit harsh. :smile:

The title threw me a little too, maybe ‘between the body tags’ would have been clearer. That said, isn’t this essentially what many JS frameworks are doing these days, in which case there’s a few out there to choose from ( and a newer one being announced everyday if we’re to believe the cynics ).

Hello my friends:

I was thinking some more like below. The only drawback is I have to provide the body tag an ID.
Source: DOM Scripting - Second Edition. Jeremy Keith.


<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

    <title>Sequence into a sound</title>
<body id="page">
<script src="module.js"></script>


window.onload = function () {
var para = document.createElement("p");
var body = document.getElementById("page");

var text = "Hello World";
var content = document.createTextNode(text);



[quote=“Novice2010, post:9, topic:197753”]The only drawback is I have to provide the body tag an ID.

var body = document.getElementById(“page”);

There are a number of ways to get the body element without the id.

var body = document.querySelector('body');

Or by using the built-in reference on the document:

var body = document.body;

Or the old-fashioned way:

var body = document.getElementsByTagName('body')[0];
1 Like

You don’t need to use onload when you put the JavaScript where it belongs - just before the </body> tag.

Yeah, and you can only use it once, unless you use workarounds, which is also a pain.

I have only ever come across one script where I needed an onload but you can easily get around it if you do need more than one by using event listeners instead of event handlers.

For example the following will run both function1() and function2() when the onload event is triggered.

1 Like

I know you like to say that, @felgall, but the OP explicitly said that the body was empty, so no <script> tags before </body> (which would make it an element inside the body).

I never intended to put script tags in the page: Creating the element will be in a function called by a button click event handler. I simply attempting to illustrate what my ideas are.

Thanks my friends!

So any JavaScript in the page at all would be in the WRONG place as ALL JavaScript with very few exceptions is best placed in a separate file attached immediately before the </body> tag. I would assume a page where JavaScript is mentioned and it states that there is noting in the body that except for the script tag at the bottom of the body is implied as otherwise the page is a jumbled mess and if the JavaScript isn’t broken now it will be at some point.

JavaScript should never be mixed in with the HTML as:

  1. it restricts you to about 2% of what JavaScript can do,
  2. it doesn’t hide the JavaScript from other scripts you decide to add later so it can clash and break, and
  3. you then need to jumble them together on every page instead of writing the JavaScript only once and linking it to all of the hundreds of pages.

I know of exactly two types of script that need to go in the <head> rather than the bottom of the body. One is a one line framebreaker script and the other is one that adds a class or classes to the <html> page so that the page can be styled differently based on what version of JavaScript is supported.

The OP just learned about appendChild(). I think we can ease off him about script placement… which is a performance optimization only, by the way, and not even the most important one. Fortunately the OP was able to solve most of his problem on his own, which is impressive considering the quality of help he was getting.

1 Like

That’s my preferred way of doing it.
More verbose perhaps, but it lets the code do a bit more IMHO

Then there’s always

Node.removeChild(), Node.replaceChild(), Node.insertBefore(), Node.hasChildNodes()

which come in handy.

As for using the best Selector, it’s easier using a browser’s dev tools, but it still isn’t all that easy to get the “best” that hopefully will be future proof with any minor changes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.