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

append(content): This method inserts the specified content at the end of the selected element (still inside). Many friends think append is similar to html. In other words, append is added to the original in the English sense, while in html it is Replaces all current content.

Definition and usage

The

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

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

Grammar

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

Example code:

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

The

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 returns the contents of the first matching element.

Grammar

$(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>div").show(); 
} 
else { 
$('#message').append("<p><strong>注销失败,请重新尝试!</strong></p>"); 
} 
}); 
});

The following is what netizens added:

Of course it’s different, append means appending, html means completely replacing
For exampled3b65352104a3dac7b6b81156e36ccade388a4556c0f65e1904146cc1a846bee12394b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3
$("#1").html("45a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d114");
The result is:d3b65352104a3dac7b6b81156e36ccad45a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3

$("#1").append("45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114");
The result is:d3b65352104a3dac7b6b81156e36ccade388a4556c0f65e1904146cc1a846bee12394b3e26ee717c64999d7867364b1b4a345a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3