Create element in JavaScript, Replace Element in JavaScript , and Replace Element with Child Node in JavaScript

HTML:-

<div class="container">

        <h1 id="heading"> Welcome to Code With My Code</h1>

        <div id="myfirst" class="" id="first">child 1

            <ul class="this" id="myul">

                <li class="childul" id="fistChidId">Home</li>

                <li class="childul">About</li>

                <li class="childul">Service</li>

                <li class="childul">Prodcut </li>

                <li class="childul" id="lastChildId">Contect Us</li>

            </ul>

        </div>

       </div>

  

CSS:-

--no--

js:-

<script type="text/javascript">

console.log("This is Create Remove and Replacing Element")    

 

//Crete element in javaScript

    const elem = document.createElement("li");

    elem.className = "classNamePa";

    elem.id = "idCreate";

    elem.setAttribute("tital", "li Create by pawan");

    elem.innerHTML = "<b> this is li create by pawan </b>";

    console.log(elem);

    const uls = document.querySelector("ul.this");

    uls.appendChild(elem);

    console.log(uls)

    

   //Replace Element

    const elem2 = document.createElement("h3");

    elem2.id = "elem2";

    elem2.className = "elem2";

    elem2.setAttribute("tital", "set Attribute Tital")

    let tnode = document.createTextNode("this is the create node");

    elem2.appendChild(tnode);

    //console.log(elem2);

    elem.replaceWith(elem2);

     

   //replace element with child node

    let myuL = document.querySelector("#myul"); 

    myuL.replaceChild(elem, document.querySelector("#fistChidId"))

    console.log(myuL);

    </script>