La différence entre la méthode jquery append() et la méthode html() et introduction à leur use_jquery

append(content) : Cette méthode insère le contenu spécifié à la fin de l'élément sélectionné (toujours à l'intérieur). De nombreux amis pensent que append est similaire au HTML. En d'autres termes, append est ajouté à l'original au sens anglais. alors qu'en HTML, il remplace tout le contenu actuel.

Définition et usage

La méthode

append() insère le contenu spécifié à la fin (toujours à l'intérieur) de l'élément sélectionné.
$(selector).append(content)

Utiliser des fonctions pour ajouter du contenu
Utilisez une fonction pour insérer du contenu à la fin d'un élément spécifié.

Grammaire

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

Exemple de 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>

La méthode

html() renvoie ou définit le contenu (HTML interne) de l'élément sélectionné.

Si cette méthode ne définit pas de paramètres, elle renvoie le contenu actuel de l'élément sélectionné.
Renvoie le contenu de l'élément
Lorsque vous utilisez cette méthode pour renvoyer une valeur, elle renvoie le contenu du premier élément correspondant.

Grammaire

$(sélecteur).html()

Définissez le contenu de tous les éléments p :

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

Effacer l'élément spécifié

$("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>"); 
} 
}); 
});

Voici ce que les internautes ont ajouté :

Bien sûr, c'est différent, append signifie ajouter, html signifie remplacer complètement
Par exempled3b65352104a3dac7b6b81156e36ccade388a4556c0f65e1904146cc1a846bee12394b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3
$("#1").html("45a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d114");
Le résultat est :d3b65352104a3dac7b6b81156e36ccad45a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3

$("#1").append("45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114");
Le résultat est :d3b65352104a3dac7b6b81156e36ccade388a4556c0f65e1904146cc1a846bee12394b3e26ee717c64999d7867364b1b4a345a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3