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. After const $userName to replace the p.para class element when the input value is submitted. Everytime I submit the Input value it should get replaced by the previous input value I have submitted. How can I do that?? kindly help.
Kindly help..thanks in advance!!
You can try out this code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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);
var input_val = $('#input').val();
$('.para').text(input_val);
});
});
});
</script>
</head>
<body>
<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>
</body>
</html>