Dom Manipulation - 改变 DOM [重复]答案

【问题标题】：Dom Manipulation - altering the DOM [duplicate]Dom Manipulation - 改变 DOM [重复]
【发布时间】：2018-07-12 13:52:38
【问题描述】：

有人知道为什么我可以让我的代码在 codepen 上运行，但不能在我的桌面上运行吗？当我在桌面上运行代码时，我不断收到“无法读取 appendChild”错误。我是编码新手，刚开始自学如何操作 DOM。

https://codepen.io/unicorn1/pen/JpYqjJ

const container = document.querySelector('#container');
const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'Dom text-content!';
container.appendChild(content);

错误信息

【问题讨论】：

您在桌面代码中将 JS 定位在哪里？这很重要。理想情况下，在正文结束之前将您的 JS 放在底部

标签： javascript jquery debugging dom nodes

【解决方案1】：

脚本应该放在正文结束前的底部

<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <h1>
    THE TITLE OF YOUR WEBPAGE
  </h1>
    <div id="container"></div>
    <script>
    const container = document.querySelector('#container');

    const content = document.createElement('div');
    content.classList.add('content');
    content.textContent = 'Dom text-content!';

    container.appendChild(content);
    </script>
</body>

</html>

或者你可以像这样将脚本的内容放在 window.onload 回调中：

<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <script>
    window.onload = function() {
        const container = document.querySelector('#container');

        const content = document.createElement('div');
        content.classList.add('content');
        content.textContent = 'Dom text-content!';

        container.appendChild(content);

    };
    </script>
    <h1>
        THE TITLE OF YOUR WEBPAGE
      </h1>
    <div id="container"></div>
</body>

</html>

原理是，DOM加载完成后可以操作DOM；加载前不能操作DOM。window.onload和脚本位置就是这样工作的；另外，您可以将 window.onload 更改为 DOMContentLoaded

<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.querySelector('#container');

        const content = document.createElement('div');
        content.classList.add('content');
        content.textContent = 'Dom text-content!';

        container.appendChild(content);

    }, false);
    </script>
    <h1>
            THE TITLE OF YOUR WEBPAGE
          </h1>
    <div id="container"></div>
</body>

</html>

【讨论】：