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

如何使用 jquery 将文本添加到现有文本的开头？

  • 772

我有一组元素<a>，例如：

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

我想在现有的文本中添加文本。所以他们是这样的：

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

它们***代表我要插入的文本的位置。如何使用 jquery 或本机 javascript 来实现这一点？

javascript

3 Answers

  1. Best Answer

    由于您有两个具有相同类的元素，因此要选择每个元素，您可以使用选择器eq，另一方面要插入文本，您可以使用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>

    • 3

  2. 如果文本对所有人都相同，您可以使用@LeonardoCabré 所说的内容，尽管没有必要一一进行。您只需使用menu-elemento我假设与组元素共享的类相同的类即可：

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

    如果你想在 JavaScript 中使用它，你可以使用getElementsByClassName它们的类来获取元素，遍历它们并将文本添加到开头：

    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. 您必须使用选择器才能访问 DOM 的元素，有不同类型的选择器是 CSS 类、标识符、标签等的选择器，这样您就可以访问每个的属性，我给你一个动态的例子使用文本框的值，将其放在每个文本框的开头

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

    如果您是新手，我建议您从学习如何访问 DOM 中的元素开始

    • 0