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:
