.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
Home 
  JavaScript Book 
    jQuery  

DOM:
  1. jQuery DOM
  2. $("html tags"):generate code with the jQuery wrapper function.
  3. .add()
  4. .addClass()
  5. .after()
  6. .andSelf()
  7. .append()
  8. .appendTo()
  9. .attr()
  10. .before()
  11. .children()
  12. .clone()
  13. .closest()
  14. .contents()
  15. .css()
  16. .detach()
  17. .filter()
  18. .first()
  19. .get()
  20. .has()
  21. .hasClass()
  22. .height()
  23. .html()
  24. .index()
  25. .innerHeight()
  26. .innerWidth()
  27. .insertAfter()
  28. .insertBefore()
  29. .is()
  30. .last()
  31. .map()
  32. .next()
  33. .nextAll()
  34. .nextUntil()
  35. .not()
  36. .offset()
  37. .offsetParent()
  38. .outerHeight()
  39. .outerWidth()
  40. .parent()
  41. .parents()
  42. .parentsUntil()
  43. .position()
  44. .prepend()
  45. .prependTo()
  46. .prev()
  47. .prevAll()
  48. .prevUntil()
  49. .remove()
  50. .removeClass()
  51. .removeAttr()
  52. .replaceAll()
  53. .replaceWith()
  54. .siblings()
  55. .scrollLeft()
  56. .scrollTop()
  57. .slice()
  58. .text()
  59. .toArray()
  60. .toggleClass()
  61. .unwrap()
  62. .val()
  63. .wrap()
  64. .wrapAll()
  65. .wrapInner()
  66. .width()