jQuery.append() 함수에 대한 자세한 설명

append() 함수는 지정된 내용을 일치하는 각 요소 내부의 끝 위치에 추가하는 데 사용됩니다.

지정된 콘텐츠는 html 문자열, DOM 요소(또는 배열), jQuery 객체, 함수(반환 값)일 수 있습니다.

이 함수의 반대는 prepend() 함수로, 지정된 내용을 일치하는 각 요소 내부의 시작 위치에 추가하는 데 사용됩니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다.

Syntax

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

Parameters

매개변수 설명

content1 문자열/요소/jQuery/함수 유형에 지정된 콘텐츠를 추가합니다.

content2 Optional/String/Element/jQuery 유형이 추가 콘텐츠를 지정했습니다.

contentN 선택 사항/문자열/요소/jQuery 유형이 추가 콘텐츠를 지정했으며 개수에는 제한이 없습니다.

append()는 여러 매개변수로 표시되는 콘텐츠를 일치하는 각 요소 내부의 끝 위치에 추가할 수 있습니다. 매개변수가 문자열 유형인 경우 html 문자열로 처리됩니다.

jQuery 1.4의 새로운 지원: 매개변수 content1은 함수일 수 있습니다. Append()는 일치하는 모든 요소를 ​​기반으로 함수를 순회하고 실행하며, 함수의 이는 해당 DOM 요소를 가리킵니다.

append()는 함수에 두 개의 매개변수도 전달합니다. 첫 번째 매개변수는 일치하는 요소에 있는 현재 요소의 인덱스이고 두 번째 매개변수는 요소의 현재 내부 HTML 콘텐츠(innerHTML)입니다. function의 반환 값은 요소(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!