将字符串附加到具有相同类名的元素

Question

不确定我需要更改什么，但我在不同的 div 中有两个具有相同类名的元素，并且我不确定如何填充它们。

HTML：

<div>
  <a class="this-thing">Text</a>
</div>
<div>
  <a class="this-thing">Text</a>
</div>

JS

const text = document.querySelectorAll(".this-thing");
text.innerHTML +='Add'

不知道为什么当我有一个实例时它会起作用，但是如果我向该类添加另一个元素，this-thing它就根本不起作用。

Answer 1

Element.getElementsByClassName()通常比前者快得多.querySelectorAll()（并且读起来更自然），所以我建议使用前者。

另外，修改节点的内部文本Node.textContent是更好的（更快更安全）选项，因此您的行可能很简单，如下所示：

[...document.getElementsByClassName('this-thing')].forEach(node => node.textContent += ' Add')

以下是快速演示：

[...document.getElementsByClassName('this-thing')].forEach(node => node.textContent += ' Add')

[...document.getElementsByClassName('this-thing')].forEach(node => node.textContent += ' Add')