The difference between jquery append() method and html() method and introduction to their use

The

append() method inserts specified content at the end of the selected element, and the html() method returns or sets the content of the selected element. The following is an introduction to the difference between the two and how to use

append(content ): Method inserts specified content at the end of the selected element (still inside). Many friends think that append is similar to html. OthersIn the English sense, append is added to the original basis, while in html it is Replaces all current content.

Definition and Usage

The append() method inserts the specified content at the end of the selected element (still inside).
$(selector).append(content)

Use function to append content
Use function to insert content at the end of the specified element.

Syntax

$(selector).append(function(index,html))

Example code:

## The #

<script src="/jquery.min.js" type="text/javascript"></script> 
<style> 
.imgFocus{border: 1px solid #eee;} 
</style> 
<p> </p> 
<script type="text/javascript"> 
var showimg = "<p class=&#39;imgFocus&#39;>123456</p>"; 
$("p").append(showimg); 
</script>

html() method returns or sets the content (inner HTML) of the selected element.

If this method does not set parameters, it returns the current content of the selected element.

Return element content
When using this method to return a value, it will return the content of the first matching element.

Syntax

$(selector).html()

Set the content of all p elements:

$(".btn1").click(function(){ 
$("p").html("Hello <b>world</b>!"); 
});

Clear the specified element

$("a[href$='logout.asp']").click(function(event) { 
event.preventDefault(); 
$.get("/xxlr/Logout.asp","",function(data, textStatus) { 
if (data == 1) { //表明注销成功 
$('#message').html(""); 
$("#userlogin>p").show(); 
} 
else { 
$(&#39;#message&#39;).append("<p><strong>注销失败,请重新尝试!</strong></p>"); 
} 
}); 
});

The following is the netizen’s addition:

Of course it is different, append is to append, html is to completely replace

For example < ;p id="1">e388a4556c0f65e1904146cc1a846bee12394b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3
$("#1").html("45a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d114");
The result is:d3b65352104a3dac7b6b81156e36ccad45a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3

$("#1").append("45a2772a6b6107b401db3c9b82c049c2 54bdf357c58b8a65c66d7c19c8e4d114");
The result is: d3b65352104a3dac7b6b81156e36ccade388a4556c0f65e1904146cc1a846bee12394b3e26ee717c64999d7867364b1b4a345a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3

The above is the detailed content of The difference between jquery append() method and html() method and introduction to their use. For more information, please follow other related articles on the PHP Chinese website!