Explication détaillée de la fonction jQuery.append()

La fonction

append() est utilisée pour ajouter le contenu spécifié à la position finale à l'intérieur de 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).

L'opposé de cette fonction est la fonction prepend(), qui est utilisée pour ajouter le contenu spécifié à la position de départ à l'intérieur de chaque élément correspondant.

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

Syntaxe

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

Paramètres

Description du paramètre

content1 String Contenu supplémentaire spécifié par le type /Element/jQuery/Function.

content2 Le type Facultatif/String/Element/jQuery a spécifié du contenu supplémentaire.

contentN Facultatif/String/Element/jQuery type de contenu supplémentaire spécifié, il peut y avoir n'importe quel nombre.

append() peut ajouter le contenu représenté par plusieurs paramètres à la position finale à l'intérieur de chaque élément correspondant. Si le paramètre est de type chaîne, il est traité comme une chaîne HTML.

Nouveau support de jQuery 1.4 : le paramètre content1 peut être une fonction. append() parcourra et exécutera la fonction en fonction de tous les éléments correspondants, et cela dans la fonction pointera vers l'élément DOM correspondant.

append() transmettra également deux paramètres à la fonction : le premier paramètre est l'index de l'élément actuel dans l'élément correspondant, et le deuxième paramètre est le contenu html interne actuel (innerHTML) de l'élément. . La valeur de retour de la fonction est le contenu qui doit être ajouté à l'élément (peut être une chaîne HTML, un élément DOM ou un objet jQuery).

Remarque : seul le premier paramètre peut être une fonction personnalisée pour l'exécution du parcours. Si les paramètres suivants sont également des fonctions, appelez sa méthode toString(), convertissez-les en chaînes et traitez-les comme du contenu HTML.

Valeur de retour

La valeur de retour de la fonction append() est de type jQuery, renvoyant l'objet jQuery actuel lui-même (pour faciliter la programmation en chaîne).

Remarque : Si le contenu ajouté est constitué de certains éléments de la page actuelle, ces éléments disparaîtront de leur position d'origine. En bref, cela équivaut à une opération de déplacement et non à une opération de copie.

Exemple et description

La fonction append() est utilisée pour ajouter du contenu à la position finale à l'intérieur de chaque élément correspondant :

<p>段落文本1<span></span><!--插入到p元素内部的末尾位置--></p>
<p>段落文本2<span></span><!--插入到p元素内部的末尾位置--></p>
<script type="text/javascript">
$("p").append( &#39;<!--插入到p元素内部的末尾位置-->&#39; ); 
</script>

Veuillez noter la fonction append() et appendTo () différence de fonction :

var $A = $("s1");
var $B = $("s2");
// 将$B追加到$A中
$A.append( $B ); // 返回$A
// 将$A追加到$B中
$A.appendTo( $B ); // 返回表示追加内容的jQuery对象( 匹配所有$B内部末尾追加的$A )

Prenons le code HTML suivant comme exemple :

<p id="n1">
    <span id="n2">CodePlayer</span>    
</p>
<p id="n3">
    <label class="move">Hello World</label>
</p>
<p id="n4">
    <i>测试内容</i>
</p>

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

var $n1 = $("#n1");
// 将一个strong标记追加到n1内部的末尾位置
$n1.append( &#39;<strong>追加内容</strong>&#39; );
// 将所有的label元素和i元素追加到n1内部的末尾位置
// 原来位置的label元素和i元素会消失(相当于是移动到n1内部的末尾位置)
$n1.append( document.getElementsByTagName("label"), $("i") );
// 为每个p元素内部的末尾位置追加一个span元素，html内容根据索引而有所不同
var $p = $("p");
$p.append( function(index, html){
    return &#39;<span>追加元素&#39; + (index + 1) + &#39;</span>&#39;;  
} );

append() ajoutera le contenu à la balise de fin de l'élément conteneur spécifié sans ajouter de caractères d'espacement supplémentaires. Le code html complet après l'exécution du code ci-dessus est le suivant (non. ajustement au format) :

<p id="n1">
    <span id="n2">CodePlayer</span>    
<strong>追加内容</strong><label class="move">Hello World</label><i>测试内容</i><span>追加元素1</span></p>
<p id="n3">
    
<span>追加元素2</span></p>
<p id="n4">
    
<span>追加元素3</span></p>

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!