JQuery：在元素的HTML之前追加项目

Question

我需要在元素的现有HTML之前附加一些HTML。我试过了：

$("p").each(function(index){
  $(this).prepend('HELLO! ');
});

但是这会把它放在<p>之前。

我也尝试过：

$(this).html().prepend('HELLO! ');

我需要得到的结果如下：

<p>HELLO! This is existing text</p>

有人知道最好的方法吗？

Answer 1

您可以使用.html( function )更新所有innerHTML元素的<p>。

$('p').html(function(i, old) {
    return 'HELLO! ' + old;
});

$('p').html(function(i, old) {
    return 'HELLO! ' + old;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>World!</p>
<p>TJ</p>

如果所有<p>元素只包含普通文本而非HTML，则也可以使用.text( function )代替.html()。

Answer 2

$("p").each(function(index){
  $(this).before('HELLO! ');
});

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

<p>paragraph</p>

使用.before()

  

描述：在匹配元素集中的每个元素之前插入由参数指定的内容。