Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❤ 💻
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

JavaScript - why document.body is null?

0 contributions
9 points

Overview

In Browser JavaScript sometimes it happens that document.body is null. It is caused because body element is not ready yet. It happens when programmer executes source code inside head element. In this article simple solutions how to sovel this problem has been described.

Example source code with issue:

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <script>
    
    function onLoad() {
        if (document.body) {
    	    console.log('document.body exists');
        } else {
            console.log('document.body does not exist');
        }
    }

    onLoad();
    
  </script>
</head>
<body>
  Web page content...
</body>
</html>

Problem solutions has been presented below.

1. onload event for body tag example

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <script>
    
    function onLoad() {
        if (document.body) {
    	    console.log('document.body exists');
        } else {
            console.log('document.body does not exist');
        }
    }
    
  </script>
</head>
<body onload="onLoad()">
  Web page content...
</body>
</html>

2. onload event for window object example

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <script>
    
    function onLoad() {
        if (document.body) {
    	    console.log('document.body exists');
        } else {
            console.log('document.body does not exist');
        }
    }
    
    window.onload = onLoad;
    // or:
    // window.addEventListener('load', onLoad);
    
  </script>
</head>
<body>
  Web page content...
</body>
</html>

3. DOMContentLoaded event for document object example

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <script>
    
    function onLoad() {
        if (document.body) {
    	    console.log('document.body exists');
        } else {
            console.log('document.body does not exist');
        }
    }
    
    document.addEventListener('DOMContentLoaded', onLoad);
    
  </script>
</head>
<body>
  Web page content...
</body>
</html>

4. JavaScript logic execution after expected elements are loaded example

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <script>
    
    function onLoad() {
        if (document.body) {
    	    console.log('document.body exists');
        } else {
            console.log('document.body does not exist');
        }
    }

  </script>
</head>
<body>
  Web page content...
  <script>
    
    onLoad();
    
  </script>
</body>
</html>

Note: the best way is to execute source source at the end of body element what has been shown in this example.

5. JavaScript logic execution after body element example

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <script>
    
    function onLoad() {
        if (document.body) {
    	    console.log('document.body exists');
        } else {
            console.log('document.body does not exist');
        }
    }

  </script>
</head>
<body>
  Web page content...
</body>
<script>
    
    onLoad();
    
</script>
</html>

6. jQuery ready method example 1

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>

    // on ready can be placed inside body element too
    $(document).ready(function() {
        if (document.body) {
    	    console.log('document.body exists');
        } else {
            console.log('document.body does not exist');
        }
    });

  </script>
</head>
<body>
  Web page content...
</body>
</html>

7. jQuery ready method example 2

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>

    // on ready can be placed inside body element too
    $(function() {
        if (document.body) {
    	    console.log('document.body exists');
        } else {
            console.log('document.body does not exist');
        }
    });

  </script>
</head>
<body>
  Web page content...
</body>
</html>

 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more