JS中向div添加段落标签失效问题求助

你的JavaScript代码无法正常运行的核心原因是脚本执行时机过早——你把引用JS文件的<script>标签放在了<head>中，此时浏览器还没渲染<body>里的<div class="klasa">元素，导致document.querySelector(".klasa")返回null，调用appendChild时自然会抛出错误。

解决办法1：将脚本标签移到body末尾 #

把<script src="pobieranko.js"></script>放到</body>标签的前面，这样当脚本执行时，页面所有DOM元素都已加载完成：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="klasa">lalal</div>

<script src="pobieranko.js"></script>
</body>
</html>

解决办法2：给脚本标签添加defer属性 #

defer属性会让浏览器延迟执行脚本，直到DOM完全加载完成，同时不会阻塞页面渲染：

<head>
    <!-- 其他head内容 -->
    <script src="pobieranko.js" defer></script>
</head>

解决办法3：在JS中监听DOMContentLoaded事件 #

修改pobieranko.js中的代码，让逻辑在DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
    const divek = document.querySelector(".klasa")
    const paragraf = document.createElement("p")
    paragraf.textContent = "paragrafik"
    
    divek.appendChild(paragraf);
});

内容的提问来源于stack exchange，提问作者Jamnik