javascript - 将文本附加到现有的 span 标记

Question

我有以下 HTML

<div class="card-text" data-test-info-type="price">
  <div class="price-section price-section--withoutTax ">
      <span data-product-price-without-tax="" class="price price--withoutTax">$20.00</span>
  </div>
</div>

我正在尝试将以下文本附加到 20.00 美元价格含税

因此最终结果为 20.00 美元 价格含税

但是，我在尝试实现这一目标时遇到了困难，我尝试了以下方法:

var span = document.getElementsByClassName("price price--withoutTax");
var txt = document.createTextNode("Prices include taxes");
span.innerText = txt.textContent;

但仍为 20.00 美元

然后我尝试了

document.getElementsByClassName('price price--withoutTax').innerHTML = "hello";

同样的结果仍然是 20.00 美元

有人可以阐明我如何向 span 标记附加附加文本吗？

Answer 1

问题是 document.getElementsByClassName 返回一个 HTML 集合，或者一堆“数组”结构中的元素。这意味着:

var span = document.getElementsByClassName("price price--withoutTax");
span.innerText = ...;

不起作用，因为 span 不是一个元素，而是一个列表。即使您有一个带有类名的元素，它也会返回一个仅包含一个元素的列表。如果您只想要第一个元素，或者只使用第一个元素，请执行以下操作:

var span = document.getElementsByClassName("price price--withoutTax")[0];

注意[0]。这会访问“数组”的第一个元素，就像 document.getElementByClassName 的返回值一样，为您提供具有给定类名的第一个元素。如果您想获取多个元素的值，您可以循环遍历它并对每个元素执行任何操作。