Question

我正在尝试使用简单的javascript更改li标签内的文本。 html内容将始终是这样的：

<section id="sidebar-right" class="sidebar-menu sidebar-right sidebar-open">
  <div class="cart-sidebar-wrap">
    <div class="cart-widget-heading">
      <h4>Shopping Cart</h4>
      <a id="sidebar_close_icon" class="close-icon-white"></a>
    </div>
    <div class="widget shopping-cart-sidebar store widget_shopping_cart">
      <div class="widget_shopping_cart_content">
        <div class="cart-widget-content">
          <div class="cart-widget-product">
            <ul class="cart-product-item cart_list product_list_widget ">
              <li class="empty">No products in the cart.</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

我要更改“购物车中没有产品”。使用javascript而不更改html代码。

我尝试这样做：

<script type="text/javascript">
    var cart_ = document.getElementById("sidebar-right");
    if(cart_){
        var target_ = cart_.getElementsByClassName("cart-sidebar-wrap")[0];
        target_ = target_.getElementsByClassName("widget")[0];
        target_ = target_.getElementsByClassName("widget_shopping_cart_content")[0];
        target_ = target_.getElementsByClassName("cart-widget-content")[0];
        console.log(target_);
    }
</script>

有人可以告诉我如何做到吗？

Answer 1

您可以使用querySelector来使用CSS选择器，该选择器比仅使用类名更灵活

在此示例中，我们选择类为ul的{{1}}，然后选择任何直接子级（cart-product-item）>元素。

li

let cart_ = document.getElementById("sidebar-right");
if (cart_) {
  let target_ = document.querySelector('ul.cart-product-item > li');

  console.log(target_);      
  target_.textContent = 'Changing the text';
}

Answer 2

将

Element.innerHTML属性设置为set或get元素的HTML代码。

例如：我们有一个<h1>标签，并带有强烈的风格：

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> 要使元素的内容get的ID等于“ myHeader”，我们将执行以下操作：

var element = document.getElementById("myHeader");
element.innerHTML

返回结果：

<strong>My Header</strong> Normal Text`

要“设置”该元素的新内容（值），代码将在此处：

Element.innerHTML = "My Header My Text";

因此，此属性不仅适用于纯文本，而且旨在传递或复制HTML代码。

=>我们不应该使用它。

但是，许多程序员（包括我自己）使用此属性在网页中插入文本，这种方法存在潜在的风险：

错误的操作：仅插入每个文本有时会删除插入的元素的所有其他HTML代码。
出于安全性考虑：当然，即使使用标记仍然没有问题，上述两个示例也是完全没有害处的，因为HTML5标准阻止了标记内命令行的执行。通过innerHTML属性插入网页时。请参阅此规则here。

由于这个原因，不建议在插入纯文本时使用innerHTML，而应使用textContent。 textContent属性将无法理解您传递的代码是HTML语法，而只是100％的文本而已。

innerText怎么样？

Node.innerText是一个属性，用于显示节点及其内部节点的渲染内容。 “呈现的文本”是您在浏览器中看到的文本形式，包括通过HTML5或CSS设置的样式。一旦使用innerText来get节点的文本内容，它（即innerText）将尝试以与用户在浏览器上突出显示文本< / strong>，然后复制到剪贴板。不管是否努力，都要努力！

Node.textContent属性包含节点及其后代的文本内容。

如果在上例中使用innerText，则返回结果：

My Header My Text

因此，您应该使用：

document.querySelector('ul.cart-product-item > li').innerText ="Your content"

使用javascript更改html标记内的文本

2 个答案: