Detaillierte Erläuterung der Funktion jQuery.append()

Die Funktion

append() wird verwendet, um den angegebenen Inhalt an die Endposition innerhalb jedes passenden Elements anzuhängen.

Der angegebene Inhalt kann sein: HTML-String, DOM-Element (oder Array), jQuery-Objekt, Funktion (Rückgabewert).

Das Gegenteil dieser Funktion ist die prepend()-Funktion, die verwendet wird, um bestimmte Inhalte an die Startposition innerhalb jedes passenden Elements anzuhängen.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

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

Parameter

Parameterbeschreibung

content1 String Zusätzlicher Inhalt, der durch den Typ /Element/jQuery/Function angegeben wird.

content2 Optional/String/Element/jQuery-Typ angegebener zusätzlicher Inhalt.

contentN Optional/String/Element/jQuery-Typ angegebener zusätzlicher Inhalt, es kann eine beliebige Anzahl sein.

append() kann den durch mehrere Parameter dargestellten Inhalt an die Endposition innerhalb jedes passenden Elements anhängen. Wenn der Parameter vom Typ String ist, wird er als HTML-String behandelt.

jQuery 1.4 neue Unterstützung: Parameter content1 kann eine Funktion sein. append() durchläuft die Funktion und führt sie basierend auf allen übereinstimmenden Elementen aus, und dies in der Funktion zeigt auf das entsprechende DOM-Element.

append() übergibt außerdem zwei Parameter an die Funktion: Der erste Parameter ist der Index des aktuellen Elements im passenden Element und der zweite Parameter ist der aktuelle interne HTML-Inhalt (innerHTML) des Elements . Der Rückgabewert der -Funktion ist der Inhalt, der an das Element angehängt werden muss (kann ein HTML-String, ein DOM-Element oder ein jQuery-Objekt sein).

Hinweis: Nur der erste Parameter kann eine benutzerdefinierte Funktion für die Traversal-Ausführung sein. Wenn der nachfolgende Parameter ebenfalls eine Funktion ist, wird seine toString()-Methode aufgerufen, in einen String umgewandelt und als HTML-Inhalt behandelt.

Rückgabewert

Der Rückgabewert der Funktion append() ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück (um die Programmierung im Kettenstil zu erleichtern).

Hinweis: Wenn es sich bei dem angehängten Inhalt um einige Elemente auf der aktuellen Seite handelt, verschwinden diese Elemente von ihren ursprünglichen Positionen. Kurz gesagt handelt es sich dabei um einen Verschiebungsvorgang und nicht um einen Kopiervorgang.

Beispiel & Beschreibung

Die Funktion append() wird verwendet, um Inhalte an die Endposition innerhalb jedes passenden Elements anzuhängen:

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

Bitte beachten Sie die Funktion append() und appendTo() Funktionsunterschied:

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

Nehmen Sie den folgenden HTML-Code als Beispiel:

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

Der folgende jQuery-Beispielcode wird verwendet, um die spezifische Verwendung von append( )-Funktion:

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() hängt den Inhalt an das End-Tag des angegebenen Containerelements an, ohne zusätzliche Leerzeichen hinzuzufügen. Der vollständige HTML-Code nach der Ausführung des obigen Codes lautet wie folgt (Nr Anpassung an das 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>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Funktion jQuery.append(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!