How can I replace an element to other element in html?
Viewed 5 times
How can I replace the input tag value to p.para tag? Please find the code I have used...
Html markup :
<h2>jQuery Misc</h2>
<div class="content">
<p>
<a href="#">My link</a>
</p>
<p class="para">This is para no #1</p>
<p>
<strong>Hello world!</strong>
</p>
<button>Action</button>
</div>
Jquery :
<script type="text/javascript">
jQuery(function($) {
const $p = $('<p>This is a new para!</p>');
const $contentDiv = $('.content');
$('button').on('click', function() {
const $userName = $('<h3><input type="text" id="input" placeholder="Enter your name"></h3>')
const $okay = $('<button class="bttn">Okay</button>')
const $cancel = $('<button class="bttn_2">Cancel</button>')
// $('.para').remove();
// $contentDiv.append($userName);
$userName.appendTo($contentDiv);
$okay.appendTo($contentDiv);
$cancel.appendTo($contentDiv);
$('.bttn_2').on('click', function() {
$userName.remove();
$okay.remove();
$cancel.remove();
});
$('.bttn').on('click', function() {
$okay.remove();
$cancel.remove();
$userName.appendTo($contentDiv);
$('div.content div.para').text(function() {
return $('input',this).val();
});
});
});
});
</script>
Here I want to change the input tag value to p.para element so what code should I use? const $userName to replace the p.para class element when the input value is subitted ...
Kindly help..thanks in advance!!