Nous avons déjà appris les méthodes d'insertion interne, d'insertion externe et de suppression des nœuds. Dans cette section, nous apprendrons la méthode de remplacement replaceWith
.replaceWith( newContent ) : remplacez tous les éléments correspondants de la collection par le. fourni le contenu et renvoie la suppression d'une collection d'éléments
Pour faire simple : utilisez $() pour sélectionner le nœud A, appelez la méthode replaceWith et transmettez un nouveau contenu B (chaîne HTML, élément DOM ou jQuery) pour remplacer celui sélectionné Nœud A
Regardez un exemple simple : un morceau de code HTML
<div>
<p>Premier paragraphe</p>
<p>No. Deuxième paragraphe</p>
<p>Troisième paragraphe</p>
</div>
Remplacer les nœuds et le contenu du deuxième paragraphe
$("p:eq(1)").replaceWith('<a style="color:red">Remplacer le contenu du deuxième paragraphe</a>')
Filtrez le deuxième élément p via jQuery et appelez replaceWith pour le remplacer. Le résultat est le suivant
<div>
<p>Premier paragraphe</. p>
<a style="color:red">Remplacer le contenu du deuxième paragraphe</a>'
<p>Le troisième paragraphe</p>
</div> ;
.replaceAll( target ): Remplacez chaque élément cible par l'élément correspondant de la collection
.replaceAll() et .replaceWith() ont des propriétés similaires fonctions, mais la cible et la source sont opposées, utilisez Pour la structure HTML ci-dessus, nous utilisons replaceAll pour traiter
$('<a style="color:red">remplacer le contenu du deuxième paragraphe< ;/a>').replaceAll('p:eq (1)')
Résumé :
replaceAll() et .replaceWith() ont des fonctions similaires, la principale différence est l'emplacement de la cible et de la source
replaceWith() La méthode .replaceAll() supprimera tous les gestionnaires de données et d'événements associés au nœud
La méthode replaceWith(), comme la plupart des autres jQuery méthodes, renvoie un objet jQuery, afin qu'il puisse être chaîné avec d'autres méthodes
L'objet jQuery renvoyé par la méthode replaceWith() fait référence au nœud avant le remplacement, et non au nœud après le remplacement via la méthode replaceWith/replaceAll.
Regardez l'exemple suivant :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
.right div {
background: yellow;
}
</style>
</head>
<body>
<h2>replaceWith()和replaceAll()</h2>
<div class="left">
<button class="bt1">点击,通过replaceWith替换内容</button>
<button class="bt2">点击,通过rreplaceAll替换内容</button>
</div>
<div class="right">
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
<div>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
</div>
</div>
<script type="text/javascript">
//只克隆节点
//不克隆事件
$(".bt1").click(function(){
//找到内容为第二段的p元素
//通过replaceWith删除并替换这个节点
$(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
})
</script>
<script type="text/javascript">
//找到内容为第六段的p元素
//通过replaceAll删除并替换这个节点
$(".bt2").click(function() {
$('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
})
</script>
</body>
</html>
section suivante