.replaceWith()

Syntax

.replaceWith(newContent)

Parameters

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

Return value

The jQuery object, for chaining purposes.

Description

Replace each element with the provided new content.

Examples

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

$('.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>

$('.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>

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

This results:

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

Replace text with

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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</p>
    </body>
</html>

Click to view the demo

Replace with another tag

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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</p>
    </body>
</html>

Click to view the demo

Replaces all matched elements with the specified HTML or DOM elements.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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</button>
    </body>
</html>

Click to view the demo

Replace a button with text

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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

Replace all

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(
          function() {
            $('input#tmpQuote1').click(
              function($e) {
                $e.preventDefault();
                $('p#id1').replaceAll(this);
              }
            );

            $('input#tmpQuote2').click(
              function($e) {
                $e.preventDefault();
                $('p#id2').replaceAll(this);
              }
            );
          }
        );
    </script>
    <style type='text/css'>
        div {
            background: #acf7d0;
            border: 3px solid #96dab6;
            margin: 3px;
        }
        div#tmp {
            display: none;
        }
    </style>
  </head>
  <body>
    <div id='tmp'>
      <p id='id1'>
        asdf
      </p>
      <p id='id2'>
        asdf
      </p>
    </div>
    <div>
      <input type='submit' id='tmpQuote1' value='View Quote' />
    </div>
    <div>
      <input type='submit' id='tmpQuote2' value='View Quote' />
    </div>
  </body>
</html>

Click to view the demo