.replaceAll()

Replace each target element with the set of matched elements.

The .replaceAll() method is similar to .replaceWith(), but with the source and target reversed. Consider this DOM structure:

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

We can create an element, then replace other elements with it:

$( "<h2>New heading</h2>" ).replaceAll( ".inner" );

This causes all of them to be replaced:

<div class="container">
  <h2>New heading</h2>
  <h2>New heading</h2>
  <h2>New heading</h2>
</div>

Or, we could select an element to use as the replacement:

$( ".first" ).replaceAll( ".third" );

This results in the DOM structure:

<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

From this example, we can see that the selected element replaces the target by being moved from its old location, not by being cloned.

The .replaceAll() method removes all data and event handlers associated with the removed nodes.

.replaceAll( target )

version added: 1.2

target

Selector or jQuery or Array or Element

A selector string, jQuery object, DOM element, or array of elements indicating which element(s) to replace.

Examples:

Replace all the paragraphs with bold words.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceAll demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "<b>Paragraph. </b>" ).replaceAll( "p" );
</script>
 
</body>
</html>

Links:

http://api.jquery.com/replaceall

doc_jQuery

2016-03-27 13:48:57

Comments