EN
JavaScript - why document.body is null?
9 points
In this article, we would like to show you how to solve document.body is null problem in JavaScript.
Sometimes in browser JavaScript document.body can be null. It is caused because body element is not ready yet. It happens when the programmer executes source code inside head element. In this article simple solutions how to solve this problem have been described.
Example source code with issue:
xxxxxxxxxx1
2
<html>3
<head>4
<script>5
6
function onLoad() {7
if (document.body) {8
console.log('document.body exists');9
} else {10
console.log('document.body does not exist');11
}12
}13
14
onLoad();15
16
</script>17
</head>18
<body>19
Web page content...20
</body>21
</html>Problem solutions have been presented below.
xxxxxxxxxx1
2
<html>3
<head>4
<script>5
6
function onLoad() {7
if (document.body) {8
console.log('document.body exists');9
} else {10
console.log('document.body does not exist');11
}12
}13
14
</script>15
</head>16
<body onload="onLoad()">17
Web page content...18
</body>19
</html>xxxxxxxxxx1
2
<html>3
<head>4
<script>5
6
function onLoad() {7
if (document.body) {8
console.log('document.body exists');9
} else {10
console.log('document.body does not exist');11
}12
}13
14
window.onload = onLoad;15
// or:16
// window.addEventListener('load', onLoad);17
18
</script>19
</head>20
<body>21
Web page content...22
</body>23
</html>xxxxxxxxxx1
2
<html>3
<head>4
<script>5
6
function onLoad() {7
if (document.body) {8
console.log('document.body exists');9
} else {10
console.log('document.body does not exist');11
}12
}13
14
document.addEventListener('DOMContentLoaded', onLoad);15
16
</script>17
</head>18
<body>19
Web page content...20
</body>21
</html>xxxxxxxxxx1
2
<html>3
<head>4
<script>5
6
function onLoad() {7
if (document.body) {8
console.log('document.body exists');9
} else {10
console.log('document.body does not exist');11
}12
}13
14
</script>15
</head>16
<body>17
Web page content...18
<script>19
20
onLoad();21
22
</script>23
</body>24
</html>Note: the best way is to execute source source at the end of body element what has been shown in this example.
xxxxxxxxxx1
2
<html>3
<head>4
<script>5
6
function onLoad() {7
if (document.body) {8
console.log('document.body exists');9
} else {10
console.log('document.body does not exist');11
}12
}13
14
</script>15
</head>16
<body>17
Web page content...18
</body>19
<script>20
21
onLoad();22
23
</script>24
</html>xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>5
<script>6
7
// on ready can be placed inside body element too8
$(document).ready(function() {9
if (document.body) {10
console.log('document.body exists');11
} else {12
console.log('document.body does not exist');13
}14
});15
16
</script>17
</head>18
<body>19
Web page content...20
</body>21
</html>xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>5
<script>6
7
// on ready can be placed inside body element too8
$(function() {9
if (document.body) {10
console.log('document.body exists');11
} else {12
console.log('document.body does not exist');13
}14
});15
16
</script>17
</head>18
<body>19
Web page content...20
</body>21
</html>