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

JavaScript
1

Hello my friends:

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

Example:

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

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!

2

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?

3

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

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

Vanilla JS! No JQuery.

I want to put the element after the body tag.

Example:

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

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

Thanks!

6

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

7

Gees, that is a bit harsh. :smile:

8

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 ).

9

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.

Html

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

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

JavaScript:

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

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

body.appendChild(para);

};
10

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

var body = document.getElementById(ā€œpageā€);
[/quote]

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
11

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

12

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

13

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.

window.addEventListener('load',function1,false);
window.addEventListener('load',function2,false);
1 Like
14

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).

15

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!

16

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.

17

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
18

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

19

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