JavaScript DOM replace child and remove child methods

 <!DOCTYPE html>

<html>

    <head>

        <title>Page Title</title>

    </head>

    <body>

        <ul id="list">

            <li>Orange</li>

            <li>Apple</li>

            <li>Grapes</li>

            <li>Banana</li>      

        </ul>

        <script>

            var newElement = document.createElement("li");

            var newText = document.createTextNode("Melon");

            newElement.appendChild(newText);

            var target = document.getElementById("list");

            var oldElement = target.children[0];

          target.replaceChild(newElement,oldElement);

          var target = document.getElementById("list");

          oldElement = target.children[3];

          target.removeChild(oldElement);

        </script>

    </body>

</html>


OUTPUT





Comments