Opérations jQuery DOM replaceWith() et replaceAll()

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>

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Opérations jQuery DOM replaceWith() et replaceAll()

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]