Replace Element Using jQuery

The replaceWith() method is an inbuilt method in jQuery that is used to replace the selected element with a new one.
It returns the jQuery element that was just changed, which has been removed from the DOM.

<!DOCTYPE html>
<html>
<head>
  <title>Replace Element By jQuery</title>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $('input').click(function() {
      $(this).replaceWith('<textarea name="textarea" id="textareaId" class="textareaClass" placeholder="I am a textarea..."></textarea>');
    });	
  });
  </script>       
  <style>
  input {
    border: 2px solid #0675c0;
    display: block;
    color: #0675c0;
    font-size: 20px;
    width: 400px;
    padding: 10px;
    box-sizing: border-box;
  }
  textarea {
    display: block;
    color: #0675c0;
    border: 2px solid #0675c0;
    font-size: 20px;
    font-weight: 700;
    width: 400px;
    height: 150px;
    padding: 10px;
    box-sizing: border-box;
  }
  </style>
</head>
<body>
  <input type="text" id="textId" name="textName" class="textClass" placeholder="I am a textbox...">	
</body> 
</html>

Output:

 

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories