Change text that is within the span that is without id or class

Navigation
2
<div id="et-secondary-menu">
    <ul id="et-secondary-nav" class="menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1405">
        <a href="https://handcraftedchile.com/mi-cuenta/">Mi cuenta</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1407"><a href="https://handcraftedchile.com/carro/">Carrito</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1406"><a href="https://handcraftedchile.com/finalizar-comprar/">Verifica tu compra y selecciona medio de pago</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1444"><a href="https://handcraftedchile.com/contacto/">Contacto</a></li>
    </ul>
    <a href="https://handcraftedchile.com/carro/" class="et-cart-info">
        <span>0 elementos</span>
    </a>
</div>
    
asked by Seba Lagos 13.04.2018 в 20:02
source

4 answers

1

Assuming that the name of the et-cart-info class is unique would be something like that. Otherwise, I would recommend adding an id.

This example is using pure javascript, in case you do not use jQuery. 

document.getElementsByClassName('et-cart-info')[0].firstElementChild.innerHTML = 'NuevoTexto';
<div id="et-secondary-menu">
    <ul id="et-secondary-nav" class="menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1405">
        <a href="https://handcraftedchile.com/mi-cuenta/">Mi cuenta</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1407"><a href="https://handcraftedchile.com/carro/">Carrito</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1406"><a href="https://handcraftedchile.com/finalizar-comprar/">Verifica tu compra y selecciona medio de pago</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1444"><a href="https://handcraftedchile.com/contacto/">Contacto</a></li>
    </ul>
    <a href="https://handcraftedchile.com/carro/" class="et-cart-info">
        <span>0 elementos</span>
    </a>
</div>
    
answered by 13.04.2018 / 20:38
source
1

You can do it using querySelector and changing your innerHTML 

document.querySelector('.et-cart-info span').innerHTML = '1 elemento';
<div id="et-secondary-menu">
  <ul id="et-secondary-nav" class="menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1405">
      <a href="https://handcraftedchile.com/mi-cuenta/">Mi cuenta</a>
      <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1407"><a href="https://handcraftedchile.com/carro/">Carrito</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1406"><a href="https://handcraftedchile.com/finalizar-comprar/">Verifica tu compra y selecciona medio de pago</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1444"><a href="https://handcraftedchile.com/contacto/">Contacto</a></li>
  </ul>
  <a href="https://handcraftedchile.com/carro/" class="et-cart-info">
    <span>0 elementos</span>
  </a>
</div>
    
answered by 13.04.2018 в 20:38
1

If your html has this structure it's easy, use jQuery , copy my example: 

$("#et-secondary-menu span").text("Escribe lo que quieras");
document.getElementsByTagName("span")[0].innerText = "Escribe otra vez.";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="et-secondary-menu">
    <ul id="et-secondary-nav" class="menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1405">
        <a href="https://handcraftedchile.com/mi-cuenta/">Mi cuenta</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1407"><a href="https://handcraftedchile.com/carro/">Carrito</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1406"><a href="https://handcraftedchile.com/finalizar-comprar/">Verifica tu compra y selecciona medio de pago</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1444"><a href="https://handcraftedchile.com/contacto/">Contacto</a></li>
    </ul>
    <a href="https://handcraftedchile.com/carro/" class="et-cart-info">
        <span>0 elementos</span>
    </a>
</div>
    
answered by 13.04.2018 в 20:31
0

    

    <script
    src="https://code.jquery.com/jquery-3.3.1.slim.js"
    integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
    crossorigin="anonymous"></script>

  <script>

  $(document).ready(function(){

    // llamada a la función que carga el texto en el span

    // cambiaTextoAlSpan("hola desde jq");
    cambiaTextoAlSpan("hola desde js");

  });

  /**
    * Función que asigna el texto en el span
   */

  function cambiaTextoAlSpan(texto_nuevo){

   //con jquery $("#et-secondary-menu>a>span").html(texto_nuevo);
   //con js solo si el html es estático
   var padre = document.getElementById('et-secondary-menu');
   var a_x = padre.childNodes[3];
   var span_x = a_x.childNodes[1];
    //usa .nodeValue para ie y textContent para otros navegadores
    span_x.textContent=texto_nuevo;



  }


    </script>


</head>
<body>



  <div id="et-secondary-menu">
      <ul id="et-secondary-nav" class="menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1405">
          <a href="https://handcraftedchile.com/mi-cuenta/">Mi cuenta</a>
          <ul class="sub-menu">
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1407"><a href="https://handcraftedchile.com/carro/">Carrito</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1406"><a href="https://handcraftedchile.com/finalizar-comprar/">Verifica tu compra y selecciona medio de pago</a></li>
          </ul>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1444"><a href="https://handcraftedchile.com/contacto/">Contacto</a></li>
      </ul>
      <a href="https://handcraftedchile.com/carro/" class="et-cart-info">
          <span>0 elementos</span>
      </a>
  </div>




</body>

    
answered by 13.04.2018 в 20:39
Modify value of html attributes with angular2 How to send various data from android to php