jQuery.append()関数の詳しい説明

append() 関数は、指定されたコンテンツを一致する各要素内の終了位置に追加するために使用されます。

指定できる内容は、html文字列、DOM要素(または配列)、jQueryオブジェクト、関数(戻り値)です。

この関数の反対は prepend() 関数で、一致する各要素内の開始位置に指定されたコンテンツを追加するために使用されます。

この関数はjQueryオブジェクト(インスタンス)に属します。

構文

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

Parameters

パラメータの説明

content1 String/Element/jQuery/Function型で指定されたコンテンツを追加します。

content2 Optional/String/Element/jQuery型で指定された追加コンテンツ。

contentN オプション/文字列/要素/jQuery タイプで指定された追加コンテンツ。任意の数があります。

append() は、複数のパラメーターで表されるコンテンツを、一致する各要素内の終了位置に追加できます。パラメータの型が文字列の場合、HTML 文字列として扱われます。

jQuery 1.4 の新しいサポート: パラメーター content1 は関数にすることができます。 append() は、一致するすべての要素に基づいて関数を走査して実行します。関数内の this は、対応する DOM 要素を指します。

append() は 2 つのパラメーターも関数に渡します。最初のパラメーターは一致する要素内の現在の要素のインデックスで、2 番目のパラメーターは要素の現在の内部 HTML コンテンツ (innerHTML) です。 関数の戻り値は、要素に追加する必要があるコンテンツです (HTML 文字列、DOM 要素、または jQuery オブジェクトにすることができます)。

注: 最初のパラメーターのみをカスタム関数にすることができ、トラバーサルの実行に使用されます。後続のパラメータも関数である場合、その toString() メソッドが呼び出され、文字列に変換され、HTML コンテンツとして扱われます。

戻り値

append() 関数の戻り値は jQuery 型で、現在の jQuery オブジェクト自体を返します (チェーン スタイルのプログラミングを容易にするため)。

注: 追加されたコンテンツが現在のページの一部の要素である場合、これらの要素は元の位置から消えます。つまり、これはコピー操作ではなく、移動操作になります。

例と説明

append() 関数は、一致する各要素の末尾にコンテンツを追加するために使用されます:

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

append() 関数と appendTo() 関数の違いに注意してください:

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

次の HTML を見てください。コード例:

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

次の jQuery サンプル コードは、append() 関数の具体的な使用法を示すために使用されます。

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() は、追加の空白を追加せずに、指定されたコンテナー要素の終了タグの前にコンテンツを追加します。コードが実行された後の完全な HTML コードは次のとおりです (形式は調整されていません):

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

以上がjQuery.append()関数の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。