查询选择器在控制台中工作，但在.js文件中不起作用

Question

我想在html文件中添加一个段落元素，我成功了。但是，我只是想尝试另一种方式。我找到了一种在页面中添加p元素的方法。

此代码来自stackoverflow。

<script type="text/javascript">
window.onload = function() {
var para = document.createElement('p');
para.innerHTML = '';
document.body.appendChild(para);
};
</script>

通过使用此内部脚本，成功添加了p元素。

我添加了具有defer属性的外部脚本，并在其中输入了这些代码。

const para = document.querySelector('p'); para.textContent = 'hi';

但不起作用。在调试工具中，它说"不能将属性'textContent'设置为null"。

因此，我在控制台中检查了，

const check = document.body.querySelector('p'); check.textContent = 'hi';

它运行得很好。。

我只是觉得

when I load my HTML,   
1st : load internal js file - make <p>. 2nd : parse whole HTML codes.   
3rd : load external js file - manipulate <p>. and it will work well.

所以，这些是我的问题

1. 为什么在.js文件中不生成"para"常量
2. 在这种情况下，控制台运行和源文件运行有什么区别

Answer 1

如果使用多个外部资源生成标记。试试这个：

const element = window.parent.document.querySelector(selector);