replaceAll method in jQuery with examples

Home » JQuery » jQuery Methods » replaceAll method in jQuery with examples

replaceAll method in jQuery with examples

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Methods

1. replaceAll() method replaces each target element with the set of matched elements.

2. replaceAll() method expects a target as parameter i.e the target element to be replaced.

3. replaceAll() method is corollary to replaceWith() element with source and target reversed. ReplaceWith() element expects element to be replaced as a paremeter.

Example 1 :

        <html>
        <head>
        <title>replaceAll</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    $("<b>replaceAll() replaces the existing content with new one</b><br/>").replaceAll("p");
                });
            });
        </script>
        </head>
        <body>
        <p>This is 20 Fingers and 2 Brains.</p>
        <p>This is demo for replaceAll method.</p>
        <p>Jquery is amazing.</p>
        <input type="button" id="myButton" value="Replace All"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>

Demo :

In the above example, we have rendered three paragraph elements. On click of "Replace All" button all paragraph elements are replaced by b element with some text.

Example 2 :

        <html>
        <head>
        <title>replaceAll</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    $("b").replaceAll("p");
                });
            });
        </script>
        </head>
        <body>
        <b>This content will replace all paragraph element's content on click of Replace All button.</b>
        <p>This is 99codingexamples.</p><br />
        <p>This is demo for replaceAll method.</p><br />
        <p>Jquery is amazing.</p><br />
        <input type="button" id="myButton" value="Replace All"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>

Demo :

In the above example, we have rendered three paragraph elements and one b element which will act as source for replacing text. On click of "Replace All" button all paragraph elements are replaced by b element.

Example 3 :

        <html>
        <head>
        <title>replaceAll</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#replaceAll").click(function () {
                    $("b").replaceAll("p");
                });
                $("#replaceWith").click(function () {
                    $("p").replaceWith($('b'));
                });
            });
        </script>
        </head>
        <body>
        <b>This content will replace all paragraph element's content on click of Replace All button.</b>
        <p>This is 99codingexamples.</p><br />
        <p>This is demo for replaceAll method.</p><br />
        <p>Jquery is amazing.</p><br />
        <input type="button" id="replaceAll" value="Replace All"/>
        <input type="button" id="replaceWith" value="Replace With"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>

Demo :

In the above example, we have rendered three paragraph elements and one b element which will act as source for replacing text.
In this example, we have shown difference between replaceAll() and replaceWith() methods. The replaceWith() method replaces all the paragraph elements with b element.