jQuery insérer insertAfter() et insertBefore()

Identique au traitement d'insertion interne, jQuery a ajouté deux nouvelles méthodes, insertAfter et insertBefore,

before() et .insertBefore() en raison d'emplacements cibles de contenu différents pour obtenir la même fonction. La principale différence réside dans la syntaxe – le contenu et l’emplacement des objectifs. Pour before(), l'expression de sélection est devant la fonction et le contenu est utilisé comme paramètre, tandis que .insertBefore() est juste le contraire, le contenu est devant la méthode et il sera placé devant de l'élément dans le paramètre

after() et .insertAfter() réalise la même fonction. La principale différence réside dans la syntaxe, en particulier dans le placement du contenu (inséré) et des cibles. Pour after(), l'expression de sélection se trouve devant la fonction et le paramètre est le contenu à insérer. Pour .insertAfter(), A l'inverse, si le contenu est devant la méthode, il sera placé après les éléments dans les paramètres

before, after et insertBefore. En plus de la différence de cible et de position, insertAfter ne prend pas en charge le traitement multi-paramètres

Remarque :

insertAfter insère l'élément encapsulé JQuery derrière l'élément spécifié, alors. déplacez l'élément suivant, puis insérez l'objet JQuery ;

insertBefore insère l'élément encapsulé par JQuery devant l'élément spécifié. S'il y a un élément devant l'élément, déplacez l'élément précédent. front Move, puis insérez l'objet JQuery ;

Écrivons un morceau de code :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <button id="bt1">insertBefore添加元素</button>
    <button id="bt2">insertAfter添加元素</button>
    <div class="aaron">
        <p class="test1">php 中文网</p>
    </div>
    <div class="test2">php.cn</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在test1元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在test2元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
    })
    </script>
</body>

</html>

Testons-le et voyons quelle différence il y a

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .test1 { background: #bbffaa; } .test2 { background: yellow; } </style> </head> <body> <button id="bt1">insertBefore添加元素</button> <button id="bt2">insertAfter添加元素</button> <div class="aaron"> <p class="test1">php 中文网</p> </div> <div class="test2">php.cn</p> </div> <script type="text/javascript"> $("#bt1").on('click', function() { //在test1元素前后插入集合中每个匹配的元素 //不支持多参数 $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1")) }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //在test2元素前后插入集合中每个匹配的元素 //不支持多参数 $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2")) }) </script> </body> </html>

soumettre Réinitialiser le code

Opération automatique

jQuery insérer insertAfter() et insertBefore()

É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]