¿Cómo puedo reemplazar el valor de la etiqueta de entrada a la etiqueta p.para? Encuentre el código que he usado...

marcado html:

 <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>

Aquí quiero cambiar el valor de la etiqueta de entrada al elemento p.para. Después de const $userName para reemplazar el elemento de clase p.para cuando se envía el valor de entrada. Cada vez que envío el valor de entrada, debe ser reemplazado por el valor de entrada anterior que he enviado. ¿¿Cómo puedo hacer eso?? amablemente ayuda

Amablemente ayuda ... ¡gracias de antemano!