Dom Manipulation - 改变 DOM [重复]
Posted
技术标签:
【中文标题】Dom Manipulation - 改变 DOM [重复]【英文标题】：Dom Manipulation - altering the DOM [duplicate] 【发布时间】：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 放在底部 【参考方案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>
【讨论】：
以上是关于Dom Manipulation - 改变 DOM [重复]的主要内容，如果未能解决你的问题，请参考以下文章
javascript Javascript DOM Manipulation可以提高性能