javascript - JavaScript 在这里实际上做了什么

Question

示例:

document.getElementById('p').addEventListener('click', function() {
  this.textContent = 'Hello';
});

<p id="p">Hello</p>

这看起来似乎很清楚，但我想知道当您单击该元素时到底会发生什么:

• JavaScript 删除元素默认文本内容并将其设置为 Hello。
• 它将旧的 Hello 替换为新的 Hello。
• 它完全没有任何作用。

Answer 1

它用新的你好替换旧的你好。

具体来说，代码将 id = p 元素的 text 内容替换为指定的内容文本。请注意，这只是文本 - 如果您想注入(inject) HTML 代码，您可以使用 innerHTML 来代替。

如果您用其他内容替换替换文本，您可以更清楚地看到这一点，例如:

document.getElementById('p').onclick = function() {
  this.textContent = 'Bob';
};

这是一个 jsFiddle 演示会发生什么:

https://jsfiddle.net/3smrzxw5/