使用javascript通过类名更改html元素的值答案

【问题标题】：Change value of html element by classname using javascript使用javascript通过类名更改html元素的值
【发布时间】：2019-11-12 10:50:05
【问题描述】：

这是我的 HTML 代码：

<li class="list-promotions">
   <ul class="list-promotions-item">
      <li>
          <a href="http://example.com/link">offers</a>
      </li>
   </ul>
</li>

我尝试使用这个 javascript 代码：(This Thread)

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementsByClassName("classname")[0].innerHTML = "qwerty";
});

它可以工作，但它会将我的 HTML 更改为：

<li class="list-promotions">
<ul class="list-promotions-item">qwerty</ul>
</li>

所以我丢失了<a> 标签和href。

我该如何解决这个问题？我只想将offers 更改为另一个文本并保留<a> 标记

注意：我无权访问 HTML 代码来为 <a> 标签设置类名并使用上面的 javascript 代码。

【问题讨论】：

更改 <a> 的 innerHTML 而不是 classname 的任何内容（因为您的 HTML 中没有这样的元素）
请更具体地说明您的要求，如果您向我们提供工作演示会很好
请创建minimal reproducible example

标签： javascript html

【解决方案1】：

document.querySelector(".list-promotions-item > li > a").textContent = "qwerty";

【讨论】：

谢谢。这可行，但它也删除了<a> 标签。

【解决方案2】：

innerHTML 属性设置或返回 HTML 内容（内部 HTML）一个元素。

您尚未将 HTML 中的类名类添加到锚标记。

<li class="list-promotions">
       <ul class="list-promotions-item">
          <li>
              <a href="http://example.com/link" class="classname">offers</a>
          </li>
       </ul>
    </li>


    document.addEventListener("DOMContentLoaded", function(event) {
      document.getElementsByClassName("classname")[0].innerHTML = "qwerty";
    });

您可以通过以下方式了解更多信息：https://www.w3schools.com/jsref/prop_html_innerhtml.asp

使用 Jquery

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $('.list-promotions-item li a').html('qwerty');
});
</script>
</head>
<body>
<li class="list-promotions">
   <ul class="list-promotions-item">
      <li>
          <a href="http://example.com/link">offers</a>
      </li>
   </ul>
</li>

</body>
</html>

【讨论】：

没有。实际上，我无权访问 HTML 代码来设置 <a> 标记的类名。 HTML 代码位于 CMS 中。
@User 使用 jquery 检查我的更新答案，您不需要为锚标记提供类
谢谢，您的代码对我不起作用。好像我不能使用 jQuery 代码来定制这个 CMS。我所发现的只是更改 header.php 文件并使用我自己的代码来做我想做的事。
@AmanjotKaur jQuery 对这种情况毫无用处。此外，OP 没有使用 jquery 或已命名它。