EN
JavaScript - why document.body is null?
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>