LearnKode

4 Example(s) of JQuery Replace


Description :

In this example, we are going to click on the button and replace the containing div with its child divs and append the class name of the selected element to the paragraph.


JQuery Replace Example - 1 
<!DOCTYPE html>
<html>
<head>

  <style>
  .container {
    background-color: rgb(5, 255, 155);
  }
  .inner {
    color: rgb(33, 17, 153);
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
 
<p>
  <button>Remove Appwrk Color!</button>
</p>
<div class="container">
  <div class="inner">Welcome to Appwrk IT Solution</div>
  <div class="inner">Welcome to Appwrk IT Solution</div>
  <div class="inner">Welcome to Appwrk IT Solution</div>
</div>
 
<script>
$( "button" ).on( "click", function() {
  var $container = $( "div.container" ).replaceWith(function() {
    return $( this ).contents();
  });
 
  $( "p" ).append( $container.attr( "class" ) );
});
</script>
 
</body>
</html>
Try it » Download Example »

Output

Description :

In this example, we are going to click, replace each paragraph with a div that is already in the DOM and selected with the $() function. Notice it doesn't clone the object but rather moves it to replace the paragraph.


JQuery Replace Example - 2 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
div{
    padding: 5px;
    width: 400px;
    border: 1px solid fuchsia;
}
p{
    border: 2px solid rgb(0, 255, 247);
    color: rgb(43, 0, 255);
    margin: 3px;
    cursor: pointer;
}
</style>
        <script>
        $(document).ready(function(){
            $("p").click(function(){
                $(this).replaceWith($("div"));
            })
        })
  </script>
</head>
    <body>
<p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p>        
<br>
<p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p>   
<br>
<p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p>
<br>
<p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p>
<br>
<div>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we are going to show how to use a function to replace selected elements with new content.


JQuery Replace Example - 3 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<style>

p{font-size: 25px; color:crimson}
h3{color:rgb(30, 220, 20)}
button{height: 40px; width:250px; font-size: 20px}
</style>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").replaceWith(function(n){
      return "<h3>Welcome to Appwrk Solution Index " + n + ".</h3>";
    });
  });
});
</script>
</head>
<body>

<h1>Appwrk IT Solution</h1>

<p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p>
<p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p>
<p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p>
<p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p>
<p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p>

<button>Replace each p element</button>

</body>
</html>
Try it » Download Example »

Output

Description :

In this example we are going to show how to replace all paragraphs with bold words


JQuery Replace Example - 4 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <style>
  b{ color:crimson}
  </style>
  <script>
    
    $(document).ready(function(){
        $("p").replaceWith("<b>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</b>","<br>");
    });
    
    </script>
    </head>
    <body>
        <p> We can serve you well because we have the best combination of affordability and quality.</p><br>
        <p> We can serve you well because we have the best combination of affordability and quality.</p><br>
        <p> We can serve you well because we have the best combination of affordability and quality.</p><br>
        <p> We can serve you well because we have the best combination of affordability and quality.</p>
    </body>
</html>
Try it » Download Example »

Output