JavaScript Button Not Displaying: Fix Document Body Null Issue

Learn why your JavaScript button isn't showing on your HTML page and how to fix document body null issues with proper script execution timing.

4 answers• 1 view

04/15/2026, 02:18 PM

Why isn’t the JavaScript button displaying on my HTML page? I’ve created a button element in my index.js file and appended it to the document body, but it’s not visible in my index.html file. Here’s my code:

HTML:

html

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 <link rel="stylesheet" href="style.css" />
 </head>
 <script src="index.js"></script>
 <body></body>
</html>

JavaScript:

javascript

let button = document.createElement('button');
button.textContent = 'Add book';
document.body.append(button);

What could be preventing the button from appearing on the page?

When your JavaScript button isn’t displaying on your HTML page, the most common cause is that your script is executing before the DOM has finished loading, specifically when document.body is null. This happens because your <script> tag is placed in the <head> section before the <body> element exists, causing the document.body.append(button) call to fail silently.

Understanding JavaScript Button Display Issues
Common Causes of Invisible JavaScript Buttons
Document Body Null: The Root Cause
DOMContentLoaded and Proper Script Execution
Solutions for Displaying JavaScript Buttons
Sources
Conclusion

Understanding JavaScript Button Display Issues

When you create a JavaScript button and append it to the document body but don’t see it on your page, this is a classic timing issue in web development. The button creation code itself is correct - you’re properly using document.createElement('button') and setting its text content with button.textContent = 'Add book'. The problem lies not in the button creation but in when your script attempts to append it to the DOM.

This issue typically occurs when scripts are placed in the <head> section or before the elements they reference in the HTML structure. In your specific case, the <script src="index.js"></script> tag is positioned before the <body> element, which means when JavaScript executes, the body doesn’t exist yet.

Common Causes of Invisible JavaScript Buttons

Several common issues can prevent a JavaScript button from displaying properly:

Script execution timing: Scripts running before the DOM is fully loaded
Incorrect element selection: Trying to append to an element that doesn’t exist yet
CSS styling conflicts: Button might be there but invisible due to styling
JavaScript errors: Other script errors preventing execution

In your case, the primary issue is the first one - timing. Your JavaScript code executes at parse time, which happens before the browser has created the <body> element. This is why document.body returns null when your script tries to append the button.

The error might not show up in your console because appending to a null element doesn’t throw an error - it simply fails silently, leaving you wondering why your button isn’t appearing.

Document Body Null: The Root Cause

The root cause of your issue is that document.body is null when your script executes. Here’s what’s happening step by step:

The browser starts parsing your HTML document
It reaches the <head> section and finds your <script src="index.js"></script> tag
The browser pauses HTML parsing to download and execute your JavaScript file
Your JavaScript code runs immediately, checking for document.body
At this point, the <body> element hasn’t been created yet, so document.body is null
The document.body.append(button) call does nothing because there’s no body to append to
The browser continues parsing HTML, creates the <body></body> element
Your button is never added to the page

This timing issue is fundamental to how browsers parse and execute HTML documents. When a script is encountered in the head, execution happens immediately, blocking further HTML parsing until the script completes.

DOMContentLoaded and Proper Script Execution

The solution to this timing issue is to ensure your JavaScript code runs after the DOM has been fully parsed. Here’s how you can fix this:

Using DOMContentLoaded Event Listener

Wrap your JavaScript code in a DOMContentLoaded event listener:

javascript

document.addEventListener('DOMContentLoaded', () => {
 let button = document.createElement('button');
 button.textContent = 'Add book';
 document.body.append(button);
});

This ensures your code only runs after the entire HTML document has been parsed and the DOM is ready. The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Moving the Script Tag

Simply move your <script> tag to just before the closing </body> tag:

html

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 <link rel="stylesheet" href="style.css" />
 </head>
 <body></body>
 <script src="index.js"></script>
</html>

This way, the script executes after the body element has been created.

Using the Defer Attribute

Add the defer attribute to your script tag:

html

<script src="index.js" defer></script>

The defer attribute tells the browser to download the script without blocking HTML parsing, and execute it after the document has been parsed. This is often considered the cleanest solution for this specific problem.

Solutions for Displaying JavaScript Buttons

Here are the most effective solutions to ensure your JavaScript buttons display properly:

Solution 1: Move Script to Bottom of Body

Place your script tag just before the closing </body> tag:

html

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 <link rel="stylesheet" href="style.css" />
 </head>
 <body></body>
 <script src="index.js"></script>
</html>

This is the simplest solution and works in all browsers.

Solution 2: Use DOMContentLoaded Event Listener

Modify your JavaScript to wait for the DOM to be ready:

javascript

document.addEventListener('DOMContentLoaded', () => {
 let button = document.createElement('button');
 button.textContent = 'Add book';
 document.body.append(button);
});

This approach keeps your script in the head if needed and ensures it runs at the right time.

Solution 3: Use Async or Defer Attributes

Add the defer attribute to your script tag:

html

<script src="index.js" defer></script>

Or use async if your script doesn’t depend on the DOM being fully built:

html

<script src="index.js" async></script>

The defer attribute is generally preferred for DOM manipulation as it ensures the script runs after parsing but before DOMContentLoaded.

Solution 4: Check if Body Exists Before Appending

Add a safety check in your JavaScript:

javascript

let button = document.createElement('button');
button.textContent = 'Add book';

if (document.body) {
 document.body.append(button);
} else {
 // Fallback: try again after DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
 document.body.append(button);
 });
}

This provides a more robust solution that handles the timing issue programmatically.

Sources

MDN Web Docs — The script tag placement before the body element causes document.body to be null when the script executes: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
MDN Web Docs — Wrap your JavaScript code in a DOMContentLoaded listener to ensure the button is added after the body has been created: https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
JavaScript.info — The button is created correctly, but the script runs before the body element is parsed when the script tag is placed before the body: https://javascript.info/modifying-document

Conclusion

The reason your JavaScript button isn’t displaying is that your script executes before the <body> element exists in the DOM, causing document.body to be null when you try to append the button. This is a common timing issue in web development that can be easily fixed by either moving your script tag to the end of the body, using the defer attribute, or wrapping your code in a DOMContentLoaded event listener. By implementing any of these solutions, your button will appear on the page as expected.

@mdn-contributors

The script tag placement before the <body> element causes document.body to be null when the script executes. When document.body is null, the appendChild method has no element to attach to, so the button never appears. Move the script tag inside the <body> or after the closing </body> tag to solve this timing issue. Alternatively, add the defer attribute to ensure the script runs after the DOM has been parsed.

@mdn-contributors

Wrap your JavaScript code in a DOMContentLoaded listener to ensure the button is added after the body has been created. This prevents the issue where document.body is null when the script executes. For example:

document.addEventListener('DOMContentLoaded', () => {
 const button = document.createElement('button');
 button.textContent = 'Add book';
 document.body.appendChild(button);
});

This ensures the button is visible on the page.

JavaScript.info

The button is created correctly, but the script runs before the <body> element is parsed. In the provided HTML, the <script src="index.js"></script> tag is placed before the <body> tag, so document.body is null when the script executes and the call to document.body.append(button) does nothing. Move the script tag to the end of the <body> or add the defer attribute (or wrap the code in a DOMContentLoaded handler) so that the element is appended after the DOM is ready.