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

replaceWith() 함수는 일치하는 각 요소를 지정된 요소로 바꾸는 데 사용됩니다.

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

Syntax

이 기능은 jQuery 1.2에서 추가되었습니다.

jQueryObject.replaceWith(replacement)

Parameters

매개변수 설명

replacement String/Element/jQuery/요소 대체에 사용되는 함수 유형입니다.

매개변수 대체가 string인 경우 html 문자열로 처리됩니다.

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

replaceWith()는 함수에 두 개의 매개변수도 전달합니다. 첫 번째 매개변수는 일치하는 요소에 있는 현재 요소의 index이고 두 번째 매개변수는 요소의 현재 내부 HTML 콘텐츠(innerHTML)입니다. 함수의 반환 값은 대체에 사용되는 콘텐츠입니다(html 문자열, DOM 요소 또는 jQuery 객체일 수 있음).

반환 값

replaceWith() 함수의 반환 값은 jQuery 유형으로, 현재 jQuery 객체 자체를 반환합니다(일치하는 요소가 문서에서 제거되었지만).

교체된 노드와 관련된 모든 데이터 및 이벤트 핸들러도 제거됩니다.

참고: 대체 요소가 현재 페이지의 요소인 경우 해당 요소는 원래 위치에서 사라집니다. 이는 복사 작업이 아닌 이동 작업과 동일합니다.

예제 및 설명

replaceWith() 함수는 일치하는 각 요소의 모든 콘텐츠 외부에서 지정된 요소를 래핑하는 데 사용됩니다.

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<script type="text/javascript">
$("p").replaceWith( &#39;<em></em>&#39; ); 
</script>
<!--以下是jQuery代码执行后的html内容-->
<em></em>
<em></em>

replaceWith()와 replacementAll() 함수의 차이점에 유의하세요.

var $A = $("s1");
var $B = $("s2");
// 将$A替换成$B
$A.replaceWith( $B ); // 返回$A
// 将$B替换成$A
$A.replaceAll( $B ); // 返回表示替换内容的jQuery对象( 匹配替换掉$B的所有$A元素 )

Please 다음 HTML 코드(원본 HTML 코드)를 참조하세요.

<p id="n1">
    <span id="n2">foo</span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
    <span id="n5">bar</span>
</p>
<div id="n6"></div>

다음 jQuery 샘플 코드는 replacementWith() 함수의 구체적인 사용법을 보여주기 위해 사용됩니다.

// 将所有span元素替换为指定的em元素
$("span").replaceWith( &#39;<em class="new">替代元素</em>&#39; );
// 将n6替换为n4
// n4将从原位置上消失
$("#n6").replaceWith( $("#n4") );
// 将所有p元素替换为div元素
$("p").replaceWith( function(i, innerHTML){
    return &#39;<div class="thread-&#39; + (i + 1) + &#39;">&#39; + innerHTML + &#39;</div>&#39;;       
} );

다음은 jQuery 코드가 실행된 후의 html 내용입니다( 형식은 어떤 식으로든 조정되지 않았습니다.):

<div class="thread-1">
    <em class="new">替代元素</em>    
</div>
<div class="thread-2">   
    <em class="new">替代元素</em>
</div>
<label id="n4">[label#n4]</label>

위 내용은 jQuery.replaceWith() 함수에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!