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
section suivante