Home / Questions / 149936
Accepted
akko
Asked: 2020-03-24 10:44:49 +0800 CST 2020-03-24 10:44:49 +0800 CST

How to add text to the beginning of an existing text with jquery?

  • 772

I have a set of elements <a>that have, for example:

<a class="menu-elemento" href="#">Hola</a>
<a class="menu-elemento" href="#">Mundo</a>

And I want to add text to the existing one. So that they are like this:

<a class="menu-elemento" href="#">*** Hola</a>
<a class="menu-elemento" href="#">*** Mundo</a>

Where ***they represent the text I want to insert. How can I achieve this using jquery or native javascript?

javascript

3 Answers

  1. Best Answer

    As you have two elements with the same class, to select each one you can use the eq selector , on the other hand to insert the text you can use the prepend function

    $(".menu-elemento:eq(0)").prepend("### "); //primero
$(".menu-elemento:eq(1)").prepend("*** "); //segundo

//En el caso que quieras poner el mismo texto a todos los elementos sin diferenciarlos
$(".menu-elemento2").prepend("&&& "); //segundo
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="menu-elemento" href="#">Hola</a>
<br>
<a class="menu-elemento" href="#">Mundo</a>
<br>
<a class="menu-elemento2" href="#">Hola</a>
<br>
<a class="menu-elemento2" href="#">Mundo</a>

    • 3

  2. If the text is the same for all, you can use what @LeonardoCabré says, although it is not necessary to do it one by one. You just do it using the class menu-elementowhich I'm assuming is the same one shared by the group elements:

    $(".menu-elemento").prepend("TEXTO ");
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="menu-elemento" href="#">Hola</a>
<br>
<a class="menu-elemento" href="#">Mundo</a>

    If you want it in JavaScript you can use getElementsByClassNameto get the elements by their class, iterate over them and add the text to the beginning:

    var elementos = document.getElementsByClassName('menu-elemento');
for (var i=0; i < elementos.length; i++) {
    elementos[i].innerText = 'TEXTO ' + elementos[i].innerText;
}
    <a class="menu-elemento" href="#">Hola</a>
<br>
<a class="menu-elemento" href="#">Mundo</a>

    • 3

  3. You must use selectors to be able to access the DOM elements, there are different types of selectors are those of CSS classes, identifier, by label, etc, that way you can access the attributes of each , I give you a dynamic example using the value of a text box, to put it at the beginning of each

    $(document)
  .ready(function(){
    var $myInput = $('#myInput');
    // accedemos a todos las etiquetas que tengan la clase menu-elemento
    var $a = $('.menu-elemento'); 
  
    // cada que el input cambie su valor
    $myInput.keyup(function(){
      $a.prepend($myInput.val());
    })
  })
    <a class="menu-elemento" href="#">Hola</a>
<a class="menu-elemento" href="#">Mundo</a>


<input type="text" id="myInput">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

    if you are new I recommend that you start by learning how to access elements within the DOM

    • 0