Detailed explanation of jQuery.replaceAll() function example

replaceAll() function is used to replace all target elements with the current matching element.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.2 Added this function.

jQueryObject.replaceAll( target )

Parameters

Parameters

Description

target String/Element/jQuery/Array The target elements whose types are to be replaced. These elements will be replaced by the current matching elements.

If the parameter target is a string, it will be regarded as a jQuery selector.

Return value

replaceAll()The return value of the function is of jQuery type and returns a jQuery object representing the replacement content.

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

Note: If an element matched by the current jQuery object is an element on the page, the element will disappear from its original position. This is equivalent to a move operation, not a copy operation.

Example & Description

The replaceAll() function is used to replace all target elements with the current matching element:

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<script type="text/javascript">
$(&#39;<em></em>&#39;).replaceAll( "p" );
// 其返回值就是匹配替换内容(两个&#39;<em></em>&#39;)的jQuery对象
</script>
<!--以下是jQuery代码执行后的html内容-->
<em></em>
<em></em>

Please note that the replacementAll() and replaceWith() functions The difference between:

var $A = $("s1");
var $B = $("s2");
// 将$B替换成$A
$A.replaceAll( $B ); // 返回表示替换内容的jQuery对象( 匹配替换掉$B的所有$A元素 )
// 将$A替换成$B
$A.replaceWith( $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 replaceAll() function:

// 用em元素替换掉所有的span元素
$(&#39;<em class="new">替代元素</em>&#39;).replaceAll( "span" );
// 用n4替换掉n6
// n4将从原位置上消失(替换到n6的位置)
$("#n4").replaceAll( $("#n6") );

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

<p id="n1">
    <em class="new">替代元素</em>    
</p>
<p id="n3">
    
    <em class="new">替代元素</em>
</p>
<label id="n4">[label#n4]</label>

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