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美元

然后我尝试了

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

同样的结果仍然是$ 20.00

有人可以了解我如何在span标记中添加其他文字吗？

Answer 1

问题是document.getElementsByClassName返回一个HTML集合，或者是'array'结构中的一堆元素。这意味着，这个：

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

无效，因为span不是一个元素，它是一个列表。即使您有一个带有类名的元素，它也会返回一个只包含一个元素的列表。如果您只想要第一个元素，或者只使用第一个元素，请执行：

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

注意[0]。这样可以访问'array'的第一个元素，就像document.getElementByClassName的返回值一样，为您提供具有给定类名的第一个元素。如果你想获得多个元素的值，你可以遍历它并对每个元素做任何事情。

将文本附加到现有span标记

1 个答案: