仅更改锚 javascript 的文本答案

【问题标题】：Change only the text of an anchor javascript仅更改锚 javascript 的文本
【发布时间】：2018-08-01 06:13:49
【问题描述】：

我正在尝试编写一个简单的脚本来更改页面上多个锚点的文本。我对 Javascript 很陌生，我可以更改锚点，但它会更改整个标签，包括删除 href。

如何只编辑文本而不影响href？

<body>
   <div class="loop-add-to-cart">
      <a href="/?preview_id=10822&#038;preview_nonce=2f9a98329f&#038;_thumbnail_id=-1&#038;preview=true&#038;add-to-cart=11544" rel="nofollow" data-product_id="11544" data-product_sku="" data-quantity="1" class="add_to_cart_button product_type_simple ajax_add_to_cart">Add to basket</a>    
      <div class="wpd-buttons-wrap-simple" data-id="11544">
         <a href="http://802.f5f.myftpupload.com/11550-2/design/11544/" class="mg-top-10 wpc-customize-product">Design from blank</a>                  
      </div>
   </div>
   <script>
      function buybuttons() {
          var buybuttons = document.getElementsByClassName('wpd-buttons-wrap-simple');
          for(var i = 0; i < buybuttons.length; i++){
              buybuttons[i].innerHTML="Test";
          };
      }

      buybuttons();
   </script>
</body>

【问题讨论】：

你能举个例子来说明你是如何抓住锚点的吗？看看 innerHTML - w3schools.com/jsref/prop_html_innerhtml.asp
您正在更改div 的innerHTML，而不是a。使用document.querySelectorAll(".wpd-buttons-wrap-simple a"):jsfiddle.net/khrismuc/rLrpv0n1
感谢工作！

标签： javascript

【解决方案1】：

您可以使用查询选择器获取类为wpd-buttons-wrap-simple 的元素内的所有a 标签：

document.querySelectorAll('.wpd-buttons-wrap-simple a');

然后您可以设置链接的textContent 或innerHTML。

<body>
   <div class="loop-add-to-cart">
      <a href="/?preview_id=10822&#038;preview_nonce=2f9a98329f&#038;_thumbnail_id=-1&#038;preview=true&#038;add-to-cart=11544" rel="nofollow" data-product_id="11544" data-product_sku="" data-quantity="1" class="add_to_cart_button product_type_simple ajax_add_to_cart">Add to basket</a>    
      <div class="wpd-buttons-wrap-simple" data-id="11544">
         <a href="http://802.f5f.myftpupload.com/11550-2/design/11544/" class="mg-top-10 wpc-customize-product">Design from blank</a>                  
      </div>
   </div>
   <script>
      function buybuttons() {
          var buybuttons = document.querySelectorAll('.wpd-buttons-wrap-simple a');
          for(var i = 0; i < buybuttons.length; i++){
              buybuttons[i].textContent = "Test";
          };
      }

      buybuttons();
   </script>
</body>

【讨论】：

【解决方案2】：

使用'querySelectorAll'可以得到类的元素和里面的元素如下：

document.querySelectorAll('.wpd-buttons-wrap-simple > a')

【讨论】：

【解决方案3】：

function buybuttons() {
            var buybuttons = document.querySelectorAll('.wpd-buttons-wrap-simple a');
            for(var i = 0; i < buybuttons.length; i++){
                buybuttons[i].innerHTML="Test";
            };
        }


buybuttons();

您当前正在覆盖 div 元素的 innerHTML，但您正在寻找 div 内部的锚元素。

使用 document.querySelectorAll 获取所有这些，或使用 document.querySelector 仅获取第一个。

【讨论】：