prof3ssorSt3v3/jquery-insert.html

## jquery-insert.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery Rehab - Inserting HTML</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        html {
            font-size: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            line-height: 1.7;
        }
    </style>
</head>

<body>
    <main>
        <!-- one -->
        <p class="original">
            <!-- two -->
            This is the original paragraph.
            <!-- three -->
        </p>
        <!-- four -->
    </main>
    <script>
        $(document).ready(function () {
            //add a click listener to add a new paragraph
            //before and another one after the original
            $(document).on('click', function () {
                return;
                $("<p>One</p>").insertBefore(".original");
                //$( ".original" ).before( "<p>One</p>" );

                $("<p>Four</p>").insertAfter(".original");
                //$( ".original" ).after( "<p>Four</p>" );

                $('.original').prepend('<span>two</span>');
                $('.original').append('<span>three</span>');
            })
        });

        document.addEventListener('DOMContentLoaded', function () {
            document.body.addEventListener('click', function (ev) {
                // parentNode.insertBefore(newNode, referenceNode); - one, two
                // parentNode.appendChild(newNode) - three - four
                // targetElement.insertAdjacentElement(position, element);
                // 1-beforebegin, 2-afterbegin, 3-beforeend, 4-afterend
                let main = document.querySelector('main');
                let orig = document.querySelector('.original');
                let one = document.createElement('p');
                one.textContent = 'One';
                let four = document.createElement('p');
                four.textContent = 'Four';
                let two = document.createElement('span');
                let three = document.createElement('span');
                two.textContent = 'two';
                three.textContent = 'three';
                main.insertBefore(one, orig);
                main.appendChild(four);
                orig.insertAdjacentElement('afterbegin', two);
                orig.insertAdjacentElement('beforeend', three);

            });
        });
    </script>
</body>

</html>