ReplaceAll of jquery (), ReplaceWith () method

One: ReplaceAll ()

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

The function belongs to an jQuery object (instance).

Grammar

JQuery 1.2 adds this function.

Jqueryobject.  ReplaceAll()   

Parameters

Parameters	Description
Target	The String/element/jquery/array type is replaced by the target element, which is replaced by the current matching element.

If the argument target is a string, it is treated as a jquery selector.

return value

replaceAll()The return value of the function is the jquery type, which returns a JQuery object that represents the replacement content.

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

Note: If an element that matches the current jquery object is an element on the page, the element disappears from its original location, which is equivalent to a move operation, not a copy operation.

Example & Description

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

<p>Paragraph Text 1<span></span></p>
<p>Paragraph text 2<span></span></p> 
 
 <script< Span class= "PLN" > type= "text/javascript"  > 
 $ ( ' <em></em> ' replaceall (  "P"   
 //its return value is a jquery object that matches the replacement content (two ' <em></em> ')  </script> 
 
 <!-- The following is the HTML content after the jquery code is executed--> 
 <em></em> 
 <EM></EM>             

Notice replaceAll() The difference between the ReplaceWith () function:

Var$A= $ ( "S1"  var $B = $ ( "S2" );  
 
 
 //replace $b with $a 
 $A . $B //returns a JQuery object representing the replacement (matches all $ A of the replacement $b)  
 //replace $ A with $b 
 $A . $B //returns $ 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 replaceAll() the specific use of a function:

Replace all span elements with the EM element
$(' <em class= ' new ' > Alternative elements </em> ').  ReplaceAll("span");

Replace N6 with N4
N4 will disappear from the original position (replace to N6 position)
$("#n4").  ReplaceAll( $("#n6"));         

Run code

The following is the HTML content of the jquery code after execution (no adjustments are made to the format):

<p Id="N1">
<em Class="New">Alternative elements</em>
</p> 
 <p  Id= "n3" > 
     
     <em class= " New "> substitution element </em> 
 </p> 
 <labelid= "N4" >[label#n4 ]</LABEL> 
 
   Two: ReplaceWith ()  
              

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

The function belongs to an jQuery object (instance).

Grammar

JQuery 1.2 adds this function.

Jqueryobject.  ReplaceWith()   

Parameters

Parameters	Description
Replacement	The string/element/jquery/function type is used for the substituted element.

If the argument replacement is a string, it is treated as an HTML string.

added support for jQuery 1.4: Parameters replacement can be functions. replaceWith()The function will be executed according to all the elements of the match, and the this corresponding DOM element will be pointed to in the function.

replaceWith()Two parameters are also passed 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 content (InnerHTML) of the element. The return value of a function is the content used for substitution (which can be an HTML string, a DOM element, a jquery object).

return value

replaceWith()The return value of the function is the jquery type, which returns 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 element replacement is an element in the current page, the element disappears from its original position. This is equivalent to a move operation, not a copy operation.

Example & Description

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

<p>Paragraph Text 1<span></span></p> 
 <p> paragraph text 2<span></ Span></p> 
 
 <script = "text/javascript" > 
 $  "P"  (  ' <em></em> '  Span class= "pun");  
 </script> 
 
 <!-- The following is the HTML content after the jquery code is executed--> 
 <em></em> 
 <EM></EM>             

Notice replaceWith() The difference between the ReplaceAll () function:

Var$A= $ ( "S1"  var $B = $ ( "S2" );  
 
 
 //replace $ A with $b 
 $A . $B //return $a 
 //replace $b with $a 
 $A replaceall ( $B  //returns a JQuery object that represents the replacement (matches all $ A of the replace $b Element)           

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 replaceWith() the specific use of a function:

Replaces all span elements with the specified EM element
$("Span").ReplaceWith( ' <em class= ' new ' > Alternative elements </em> ' );

Replace the N6 with the N4
N4 will disappear from its original position.
$("#n6").ReplaceWith($("#n4") );

Replace all p elements with DIV elements
$("P").ReplaceWith( function (i, Innerhtml 
     return  ' <div class= ' thread- '  + InnerHTML +< Span class= "PLN" >  </div> ' ;       
 Span class= "pun" >} );           

Run code

The following is the HTML content of the jquery code after execution (no adjustments are made to the format):

<div Class="Thread-1">
<em Class="New"> alternative elements </em>     
 </ Div> 
 <div class = "thread-2" > 
     
     <em class=  "new" > alternative element </em>  
 </div> 
 <label  id= "N4" > [label#n4]</LABEL>          

     
 
        /span>                

jquery replaceall (), ReplaceWith () method detailed