2

Tengo un conjunto de elementos <a>que tienen, por ejemplo:

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

Y quiero agregarles texto al ya existente. Para que queden de esta manera:

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

Donde los *** representan el texto que quiero insertar. ¿Cómo puedo conseguir esto utilizando jquery o javascript nativo?

2
  • tiene que tener el mismo id o el mismo class name? Commented el 23 mar. 2018 a las 18:49
  • Te recomiendo que leas sobre como manejar el DOM con javascript aquí te dejo una buena introducción. Ya luego, facilítate la vida con jQuery, pero no cometas el mismo error que yo, primero aprende javascript bien y luego entra en jQuery. Te será más fácil. Commented el 24 mar. 2018 a las 1:38

3 respuestas 3

3

Como tenes dos elementos con la misma clase, para seleccionar cada uno podes usar el selector eq, por otro lado para insertar el texto podes usar la función prepend

$(".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>

1
  • Muchas gracias por tu respuesta. No conocía la función prepend.
    – akko
    Commented el 24 mar. 2018 a las 1:55
3

Si el texto es el mismo para todos, puedes usar lo que dice @LeonardoCabré aunque no es necesario hacerlo uno por uno. Solo lo haces usando la clase menu-elemento que asumo es la misma que comparten los elementos del grupo:

$(".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>

Si lo quieres en JavaScript puedes usar getElementsByClassName para obtener los elementos por su clase, iterar sobre ellos y agregarles el texto al inicio:

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>

0

Debes usar selectores para poder acceder a los elementos del DOM, existen diferentes tipos de selectores están los de clases CSS, identificador, por etiqueta, etc, de esa manera puedes acceder a los atributos de cada , te pongo un ejemplo dinámico usando el valor de una caja de texto, para ponerlo al inicio de cada

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

si eres nuevo te recomiendo que empieces por aprender como acceder a elementos dentro del DOM

2
  • Tu respuesta funciona, pero considero que le estas añadiendo mas complejidad de la necesaria :S solo con poner $('.menu-elemento').prepend('*** '); deberia funcionar, recorrer los valores esta de mas. Commented el 23 mar. 2018 a las 23:46
  • @CristinaCarrascoAngulo tienes mucha razón, editare la respuesta para no generar confusiones, gracias por la observación
    – oscar_sls
    Commented el 24 mar. 2018 a las 0:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.