Change the text inside html tag with javascript

Question

I'm trying to change text inside the li tag with plain javascript. The html content will always be like this:

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

I want to change "No products in the cart." with javascript without changing the html code.

I have tried to do so:

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

Can someone show how it can be done please?

Answer 1

Element.innerHTML property to set, or get element's HTML code.

Ex: We have a <h1> tag and strong style with it:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> To get content of the element has id equals to "myHeader", we will do the same:

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

Return result:

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

To "set" new content (value) for this element, the code will be here:

Element.innerHTML = "My Header My Text";

So this property not only works with plain text, but it is aimed at passing or copying HTML code.

=> We should not use it.

However, many programmers (including myself) use this attribute to insert text into a web page, and this method carries a potential risk:

1. Wrong operation: inserting each text only sometimes deletes all other HTML code of the inserted element.
2. For security: Of course, the two examples above are completely harmless, even if using the tag is still no problem because the HTML5 standard has prevented the execution of the command line inside the tag. when inserted into the web page via the innerHTML attribute. See this rule here.

Because of this reason, using innerHTML is not recommended when inserting plain text, instead use textContent. The textContent property will not understand that the code you pass is an HTML syntax, but just a 100% text no more and no less.

How about innerText?

Node.innerText is an property that shows the rendered content of a node as well as the nodes within it. "Rendered text" is the form of text that you see in the browser, including styles set through HTML5 or CSS. Once using innerText to get the node's text content, it (ie innerText) will try to return the result in the same way as the user highlighted the text on the browser and then copied to the clipboard. Try hard, whether or not, it depends on where!

The Node.textContent property contains the text content of the node and its descendants.

The result returns if using innerText in the above example:

My Header My Text

So, you should use:

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

Answer 2

You can use querySelector to make use of CSS selectors, which are more flexible than just using class names

In this example, we're selecting the ul with the class cart-product-item, and then selecting any direct child (>) li elements.

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';
}

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