jQuery replaceAll() Method

jQuery | replaceAll() Method: Learn about the jQuery replaceAll() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 18, 2022

replaceAll() Method

The replaceAll() is a jQuery's built-in method. It helps to replace the selected content with some new HTML elements and content. The replaceAll() method replaces all the selected elements on the document. Therefore, this method is a lot useful when you want to select all the elements with a similar selector and replace them with new elements. This method can be preserved as the find & replace the property of MS Word, where we can find a word and replace it with some new word all over the document.

replaceAll() Method Syntax

$('New Content').replaceAll('selector');

The replaceAll() method accepts two parameters – the new content & the element selected (to be replaced). The content can be defined along with the HTML tag and its properties over here. The element to be replaced is given through its selector and helps to replace all the matched elements with the new content. This method then returns the new HTML element in place of the old elements present.

The following example shows the implementation of the replaceAll() method, where when the button is clicked, it replaces the matched element with some new content.

jQuery replaceAll() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      .display{
      font-size: x-large;
      font-weight: bolder;
      margin: 20px;
      }
    </style>
  </head>

  <body>
    <h2>jQuery - Replace All</h2>
    <p>Click the button to replace all the matched elements.</p>
    <button>Replace All</button>
    <hr>
    <img style="height:200px" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
    <div class="display" style="color: brown;">Welcome to Include Help !!!</div>
    <div>This is an example of replace all method in jQuery.</div>
    <hr>
  </body>

  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('<p class="display" style="color: purple;">Thanks For Visiting !!!</p>').replaceAll('div');
        })
    });    
  </script>
</html>

Output:

After clicking on "Remove All" button.

jQuery replaceWith() Method

jQuery bind() Method

Comments and Discussions!

Load comments ↻