下面是一个非常简单的函数,它将设置DOM元素的文本内容。
const display = (el, value) => {
el.textContent = value;
};
display(document.getElementById('element1'), 'One');
display(document.getElementById('element2'), 'Two');
<span id="element1" />
<span id="element2" />
奇怪的是,第二次调用该函数时,会出现以下错误:
未捕获的TypeError:无法将属性'textContent'设置为null
起初,我认为问题可能是由于第二个元素在执行时可能尚未加载而引起的,但是:
body
标记的末尾处内联,因此所有DOM元素都应该已加载。Two
。display()
和console.log(document.getElementById('element1'))
替换对console.log(document.getElementById('element2'))
的调用会成功打印出两个元素。One
,但不会发生错误。所以我很困惑。该问题在堆栈片段中以及在作为单独的HTML页面加载时均出现。它在当前的Firefox和Chrome中都出现。
我在这里错过了很明显的东西吗?谁能告诉我发生了什么事?
答案 0 :(得分:2)
const display = (el, value) => {
el.textContent = value;
};
display(document.getElementById('element1'), 'One');
display(document.getElementById('element2'), 'Two');
<span id="element1"></span>
<span id="element2"></span>
如果您更正了span
标签,那么它将正常工作。因此您可以正确关闭span
标签。