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

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 >Okay</button>')
            const $cancel = $('<button >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!!

CodePudding user response：

you should first need to learn js, in js variable is not create by $

correct way

create variable const p='<p>This is a new para!</p>'

add string to div $(.content).append(p)

and you only remove element by is id, class name, quarry selector OR its DOM position

CodePudding user response：

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 >Okay</button>')
            const $cancel = $('<button >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>