Question

我正在尝试更改ul中的li内标签的文本值。

所以：

HTML和JS

document.getElementsByClassName("hs-error-msgs inputs-list").innerText = "Bitte füllen Sie dieses Pflichtfeld aus!";

<ul class="hs-error-msgs inputs-list" style="display:block;" role="alert" data-reactid=".hbspt-forms-0.0:$0.3">
  <li data-reactid=".hbspt-forms-0.0:$0.3.$0"> <label data-reactid=".hbspt-forms-0.0:$0.3.$0.0">Please complete this required field. </label> </li>
</ul>

Answer 1

getElementsByClassName返回一个集合。您可以获取此集合的第一个元素，然后在其中选择label，例如使用另一个集合方法getElementsByTagName。

var ul = document.getElementsByClassName("hs-error-msgs inputs-list")[0]
var label = ul.getElementsByTagName('label')[0]

label.innerText = "Bitte füllen Sie dieses Pflichtfeld aus!";

<ul class="hs-error-msgs inputs-list" style="display:block;" role="alert" data-reactid=".hbspt-forms-0.0:$0.3">
  <li data-reactid=".hbspt-forms-0.0:$0.3.$0"> <label data-reactid=".hbspt-forms-0.0:$0.3.$0.0">Please complete this required field. </label> </li>
</ul>

然而，更方便的方法是querySelector：

var label = document.querySelector(".hs-error-msgs.inputs-list label")

label.innerText = "Bitte füllen Sie dieses Pflichtfeld aus!";

<ul class="hs-error-msgs inputs-list" style="display:block;" role="alert" data-reactid=".hbspt-forms-0.0:$0.3">
  <li data-reactid=".hbspt-forms-0.0:$0.3.$0"> <label data-reactid=".hbspt-forms-0.0:$0.3.$0.0">Please complete this required field. </label> </li>
</ul>

Answer 2

您需要查询label，使用querySelector

var text = "Bitte füllen Sie dieses Pflichtfeld aus!";
document.querySelector( ".hs-error-msgs inputs-list li label").innerText = text;

Answer 3

尝试querySelector()，如下所示：

＆＃13;

var label = document.querySelector("ul.hs-error-msgs.inputs-list > li > label");
label.innerText = "Bitte füllen Sie dieses Pflichtfeld aus!";

＆＃13;

<ul class="hs-error-msgs inputs-list" style="display:block;" role="alert" data-reactid=".hbspt-forms-0.0:$0.3">
  <li data-reactid=".hbspt-forms-0.0:$0.3.$0"> <label data-reactid=".hbspt-forms-0.0:$0.3.$0.0">Please complete this required field. </label> </li>
</ul>

＆＃13;

Answer 4

使用querySelector在一行中获取单个项目。

document.querySelector(".hs-error-msgs.inputs-list label").innerText = "Bitte füllen Sie dieses Pflichtfeld aus!";

这将使用您指定的类从元素内部选择一个标签。如果您有多个项目，请使用querySelectorAll并使用for循环进行迭代。

使用innerText Javascript更改标签的值

4 个答案: