.replaceWith()

In this chapter you will learn:

Syntax and Description for .replaceWith()
Change the tag with replaceWith
Replace with hard coded tag
Replace in click event
Change button text

Syntax and Description

.replaceWith(newContent)

replaces each element with the provided new content.

newContent is the content to insert. This might be an HTML string, a DOM element, or a jQuery object.

Its return values is the jQuery object, for chaining purposes.

For the following HTML elements

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

apply the following

$('.second').replaceWith('<h2>New heading</h2>');

This results is:

<div class="container">
 <div class="first">Hello</div>
 <h2>New heading</h2>
 <div class="third">InnerText</div>
</div>

Apply the following

$('.inner').replaceWith('<h2>New heading</h2>');

The result is

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

Applying the following

$('.third').replaceWith($('.first'));

This results:

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

Change the tag with replaceWith

The following code changes the tag name by keeping the text.

<html><!--from j a  va2s.co  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("p").replaceWith("<div>" + $(this).text() + "</div>");
        });
    </script>
    <style>
      div { border:2px green solid;}
    </style>
  </head>
  <body>
    <body>
       <p>Hello java2s.com</p>
    </body>
</html>

Click to view the demo

Replace with hard coded tag

The following code replaces existing tag with a hard coded tag.

<html><!--from j  a v a2s.  com-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("p").replaceWith("<b>Paragraph. </b>");
        });
    </script>
    <style>
      div { border:2px green solid;}
    </style>
  </head>
  <body>
    <body>
       <p>Hello java2s.com</p>
    </body>
</html>

Click to view the demo

Replace in click event

The following code replaces all matched elements with the specified DOM elements in the button click event.

<html><!--from  j  a  va2 s  . c  om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("button").click(function () {
                  $(this).replaceWith("<div>" + $(this).text() + "</div>");
                });
        });
    </script>
  </head>
  <body>
    <body>
          <button>First java2s.com</button>
    </body>
</html>

Click to view the demo

Change button text

The following code uses the replaceWith method to change the button text.

<html><!--   j  a  v  a  2 s .  c  om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(
          function() {
            $('input#id1').click(
              function($e) {
                $e.preventDefault();
                $(this).replaceWith(
                  "<p>replaced</p>"
                );
              }
            );
            $('input#id2').click(
              function($e) {
                $e.preventDefault();
                $(this).replaceWith(
                  "<p>replaced</p>"
                );
              }
            );
          }
        );
    </script>
  </head>
  <body>
    <div>
      <input type='submit' id='id1' value='View Quote' />
    </div>
    <div>
      <input type='submit' id='id2' value='View Quote' />
    </div>
  </body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter:

Syntax and Description