How can I replace an element to other element in html?

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