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

Question

I need to append some HTML before the existing HTML of an element. I have tried:

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

But this places it before <p> .

I've also tried:

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

The result I need to get would look like:

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

Would anyone know the best way to do this?

Answer 1

You can use .html( function ) to update the innerHTML of all the <p> elements.

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

If all the <p> elements just contains normal text and not HTML, .text( function ) can also be used instead of .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> 

use .before()

Description: Insert content, specified by the parameter, before each element in the set of matched elements.