Explication détaillée de l'utilisation de jquery insertBefore(), insertAfter(), prependTo(), appendTo()

Navigation :

1. L'utilisation de ces quatre fonctions, insertBefore(), insertAfter(), prependTo(), appendTo(), est presque la même

2, en revanche il y a quatre fonctions : Before(),After(),prepend(),append()

1, jQuery.insertAfter() Explication détaillée de la fonction (se référer à son utilisation pour les trois autres)

est utilisée pour insertAfter() Insérer tous les éléments correspondants actuels après l'élément spécifié .

Par rapport à cette fonction se trouve la fonction insertBefore(), qui est utilisée pour insérer tous les éléments correspondants actuels avant l'élément spécifié .

Cette fonction appartient à l'objet (instance). jQuery

Syntaxe

jQueryObject.insertAfter( target )

Paramètres< th>Paramètre

参数	描述
target	String/Element/jQuery类型指定的目标元素，以便于在该目标之后插入当前匹配的元素。

DescriptiontargetcibleÉlément cible spécifié de type String/Element/jQuery, afin que l'élément actuellement correspondant puisse être inséré après la cible.

Si le paramètre est un type de chaîne, il est traité comme un sélecteur jQuery ou une chaîne de contenu html, jQuery Will porter son propre jugement.

insertAfter()Valeur de retour

La valeur de retour de la fonction

est de type jQuery, et la valeur de retour représente l'objet jQuery de contenu inséré. Remarque : Si les éléments correspondant à l'objet jQuery actuel sont certains éléments de la page actuelle, alors ces éléments

disparaîtront

de leurs positions d'origine. En bref, cela équivaut à une opération de déplacement , pas à une opération de copie.

insertAfter()Exemple et description

<span class="tag" style="font-size: 18px;"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="pln"><br/><br/><span class="com"><!--以上是jQuery代码执行前的html内容--><span class="pln"><br/><span class="tag"><script<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text/<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>"<span class="tag">><span class="pln"><br/>$<span class="pun">(<span class="str">&#39;<!--插入到p元素之后的位置-->&#39;<span class="pun">).<span class="pln">insertAfter<span class="pun">(<span class="pln"> <span class="str">"p"<span class="pln"> <span class="pun">);<span class="pln"><br/><span class="com">// 其返回值就是匹配插入内容(两个注释元素&#39;<!--插入到p元素之后的位置-->&#39;)的jQuery对象<span class="pln"><br/><span class="tag"></script><span class="pln"><br/><span class="com"><!--以下是jQuery代码执行后的html内容--><span class="pln"><br/><br/><span class="tag"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="com"><!--插入到p元素之后的位置--><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="com"><!--插入到p元素之后的位置--></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

La fonction est utilisée pour insérer tous les éléments correspondants dans la position après l'élément spécifié

: insertAfter()

Veuillez noter la différence entre la fonction

<span class="kwd" style="font-size: 18px; color: #0000ff;">var<span class="pln"> $A <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s1"<span class="pun">);<span class="pln"><br/><span class="kwd">var<span class="pln"> $B <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s2"<span class="pun">);<span class="pln"><br/><br/><span class="com">// 将$A插入到$B之后<span class="pln"><br/>$A<span class="pun">.<span class="pln">insertAfter<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )<span class="pln"><br/><span class="com">// 将$B插入到$A之后<span class="pln"><br/>$A<span class="pun">.<span class="pln">after<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回$A</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

et la fonction

after() :

<span class="tag" style="font-size: 18px;"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"move"<span class="tag">><span class="pln">label#n4<span class="tag"></label><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">span#n6<span class="tag"></span><span class="pln"><br/><span class="tag"></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Prenons le code HTML suivant comme exemple : insertAfter()

<span class="com" style="font-size: 18px;">// 将一个自定义的i元素插入到n4之后<span class="pln"><br/>$<span class="pun">(<span class="str">&#39;<i>i元素</i>&#39;<span class="pun">).<span class="pln">insertAfter<span class="pun">(<span class="pln"> <span class="str">"#n4"<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><span class="com">// 将n4插入到n2之后<span class="pln"><br/><span class="com">// n4将从原位置上消失<span class="pln"><br/>$<span class="pun">(<span class="str">&#39;#4&#39;<span class="pun">).<span class="pln">insertAfter<span class="pun">(<span class="pln"> document<span class="pun">.<span class="pln">getElementById<span class="pun">(<span class="str">"n2"<span class="pun">)<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><span class="com">//将一个自定义的strong元素插入到每个span元素之后<span class="pln"><br/>$<span class="pun">(<span class="str">"<strong>插入文本</strong>"<span class="pun">).<span class="pln">insertAfter<span class="pun">(<span class="pln"> <span class="str">"span"<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

L'exemple de code jQuery suivant est utilisé pour démontrer l'utilisation spécifique de la fonction :

insertAfter()Exécuter le code insérera l'élément correspondant actuel dans l'élément cible après la

fermeture la balise

<span class="tag" style="font-size: 18px;"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><strong><span class="pln">插入文本<span class="tag"></strong><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"move"<span class="tag">><span class="pln">label#n4<span class="tag"></label><i><span class="pln">i元素<span class="tag"></i><span class="pln"><br/><span class="tag"></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

,

n'ajoutera aucun caractère d'espacement supplémentaire

Le code html complet après l'exécution du code ci-dessus est le suivant (le format n'a en aucun cas été ajusté) :

.

2. Explication détaillée de l'utilisation de la fonction after() (les trois autres peuvent se référer à son utilisation)

after()

la fonction est utilisée Insère le contenu spécifié après chaque élément correspondant.

Le contenu spécifié peut être : une chaîne html, un élément (ou un tableau) DOM, un objet jQuery, une fonction (valeur de retour). Par rapport à cette fonction

se trouve la fonction before(), qui est utilisée pour insérer le contenu spécifié avant chaque élément correspondant . jQuery

Cette fonction appartient à l'objet (instance).

jQueryObject.after( content1 [, content2 [, contentN ]] )

Syntaxe

参数	描述
content1	String/Element/jQuery/Function类型指定的追加内容。
content2	可选/String/Element/jQuery类型指定的追加内容。
contentN	可选/String/Element/jQuery类型指定的追加内容，可以有任意多个。

<🎜><🎜>Paramètres<🎜><🎜>< th><🎜>Paramètre<🎜>

<🎜>Description<🎜>
<🎜>content1<🎜>	Contenu supplémentaire spécifié par le type String/Element/jQuery/Function. <🎜>
<🎜>content2<🎜>	Oui Sélectionnez le contenu supplémentaire spécifié par le type /String/Element/jQuery. <🎜>
<🎜>contentN<🎜>	Oui Sélectionnez le contenu supplémentaire spécifié par le type /String/Element/jQuery, et il peut y en avoir n'importe quel nombre. <🎜>

after()可以将多个参数所表示的内容全部插入到紧邻每个匹配元素之后的位置。如果参数为字符串类型，则将其视作html字符串。

jQuery 1.4 新增支持：参数content1可以为函数。after()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素。

after()还会为函数传入两个参数：第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部html内容(innerHTML)。函数的返回值就是需要插入的内容(可以是html字符串、DOM元素、jQuery对象)。

注意：只有第一个参数可以为自定义函数，用于遍历执行。如果之后的参数也为函数，则调用其toString()方法，将其转为字符串，并视为html内容。

返回值

after()函数的返回值为jQuery类型，返回当前jQuery对象本身(以便于进行链式风格的编程)。

注意：如果插入的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。

示例&说明

after()函数用于在每个匹配元素之后的位置插入内容：

<span class="tag" style="font-size: 14pt;"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="com"><!--插入到p元素之后的位置--><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="com"><!--插入到p元素之后的位置--><span class="pln"><br/><br/><br/><span class="tag"><script<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text/javascript"<span class="tag">><span class="pln"><br/>$<span class="pun">(<span class="str">"p"<span class="pun">).<span class="pln">after<span class="pun">(<span class="pln"> <span class="str">&#39;<!--插入到p元素之后的位置-->&#39;<span class="pln"> <span class="pun">);<span class="pln"> <br/><span class="tag"></script></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

请注意after()函数和insertAfter()函数的区别：

<span class="kwd" style="font-size: 14pt;">var<span class="pln"> $A <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s1"<span class="pun">);<span class="pln"><br/><span class="kwd">var<span class="pln"> $B <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s2"<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 将$B插入到$A之后<span class="pln"><br/>$A<span class="pun">.<span class="pln">after<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回$A<span class="pln"><br/><span class="com">// 将$A插入到$B之后<span class="pln"><br/>$A<span class="pun">.<span class="pln">insertAfter<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

以下面这段HTML代码为例：

<span class="tag" style="font-size: 14pt;"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">label#n4<span class="tag"></label><span class="pln"><br/>    <span class="tag"><i<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">i#n5<span class="tag"></i><span class="pln"><br/><span class="tag"></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

以下jQuery示例代码用于演示after()函数的具体用法：

<span class="com" style="font-size: 14pt;">// 在n4之后插入一个自定义的span元素<span class="pln"><br/>$<span class="pun">(<span class="str">"#n4"<span class="pun">).<span class="pln">after<span class="pun">(<span class="str">&#39;<span id="n6">span#n6(new)</span>&#39;<span class="pun">);<span class="pln"><br/><br/><span class="com">// 在n2之后插入n5<span class="pln"><br/><span class="com">// n5将从原位置上消失<span class="pln"><br/>$<span class="pun">(<span class="str">"#n2"<span class="pun">).<span class="pln">after<span class="pun">(<span class="pln"> document<span class="pun">.<span class="pln">getElementById<span class="pun">(<span class="str">"n5"<span class="pun">)<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><span class="com">// 在每个span元素之后插入自定义的strong元素<span class="pln"><br/>$<span class="pun">(<span class="str">"span"<span class="pun">).<span class="pln">after<span class="pun">(<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">index<span class="pun">,<span class="pln"> innerHTML<span class="pun">){<span class="pln"><br/>    <span class="kwd">return<span class="pln"> <span class="str">&#39;<strong>strong元素&#39;<span class="pln"> <span class="pun">+<span class="pln"> <span class="pun">(<span class="pln">index <span class="pun">+<span class="pln"> <span class="lit">1<span class="pun">)<span class="pln"> <span class="pun">+<span class="pln"> <span class="str">&#39;</strong>&#39;<span class="pun">;<span class="pln"><br/><span class="pun">}<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

运行代码

after()会将内容插入指定元素的结束标记之后，不会额外添加任何空白字符，上述代码执行后的完整html代码如下(格式未作任何调整)：

<span class="tag" style="font-size: 14pt;"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><strong><span class="pln">strong元素1<span class="tag"></strong><i<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">i#n5<span class="tag"></i><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">label#n4<span class="tag"></label><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">span#n6(new)<span class="tag"></span><strong><span class="pln">strong元素2<span class="tag"></strong><span class="pln"><br/>    <br/><span class="tag"></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!