Detailed explanation of jQuery.replaceWith() function

replaceWith() function is used to replace each matching element with the specified element.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.2 Added this function.

jQueryObject.replaceWith(replacement)

Parameters

Parameter Description

replacement String/Element/jQuery/Function type is used Alternative elements.

If the parameter replacement is a string, it will be treated as an html string.

jQuery 1.4 New support: parameter replacement can be a function. replaceWith() will traverse and execute this function based on all matching elements, and this in the function will point to the corresponding DOM element.

replaceWith() will also pass in two parameters to the function: the first parameter is the index of the current element in the matching element, and the second parameter is the current internal html of the element. content(innerHTML). The return value of the function is the content used for replacement (can be an html string, DOM element, or jQuery object).

Return value

The return value of the replaceWith() function is of jQuery type, returning the current jQuery object itself (although its matching elements have been removed from the document).

All data and event handlers associated with the replaced node will also be removed.

Note: If the replacement element is an element in the current page, the element will disappear from its original position. This is equivalent to a move operation, not a copy operation.

Example & Description

The replaceWith() function is used to wrap the specified element outside all the content of each matching element:

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

Please note replaceWith() and replaceAll( ) differences between functions:

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

Please refer to the following HTML code (original HTML code):

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

The following jQuery sample code is used to demonstrate the specific usage of the replaceWith() function:

// 将所有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;;       
} );

The following is the html content after the jQuery code is executed (the format has not been adjusted):

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

The above is the detailed content of Detailed explanation of jQuery.replaceWith() function. For more information, please follow other related articles on the PHP Chinese website!