CRUD OPERATIONS IN DOM

CRUD operations:

1. create:

<h1 id="one">hello</h1>
    <h2 id="two"> gokul</h2>
    <button id="three" onclick="change()">click me</button>

    <script>
        const btn = document.getElementById("three")
        const h2 = document.getElementById("two")
        const h1 = document.getElementById("one")
        function change(){
            const newesttag = document.createElement("p");
            newesttag.innerText = "MSD fan"

            document.body.insertBefore(newesttag,h2)
        }
    </script>

Output:

2. read:

<h1 id="one">hello</h1>
    <h2 class="two">hii</h2>
    <h2 class="two">hii hii</h2>
    <p>Lorem ipsum dolor sit amet.</p>
   <script>
        const queryall = document.querySelectorAll("h2");
        console.log(queryall);
        console.log(queryall.innerText);
        console.log(queryall[1].innerText);            
    </script>

Output:
NodeList [ h2.two, h2.two]
undefined
hii hii

3. update:

<h1 id="one"></h1>
    <p id="two"></p>

    <script>
        const h1 = document.getElementById("one")
        const p = document.getElementById("two")
        h1.innerText = "Chennai Super Kings"
        p.innerText = "Chennai Super Kings (CSK) is a professional T20 cricket franchise led by captain Ruturaj Gaikwad and five-time IPL champions."
    </script>

Output:

4. delete:

<input type="number" id="one">
    <button id="two" onclick="deletion()">delete</button>
    <h2>hello</h2>
    <h2>hi</h2>
    <h2>world</h2>
    <h2>msd</h2>

    <script>
        const allvalue = document.getElementById("one")

        function deletion() {
            const elems = document.querySelectorAll("h2");
            const index = Number(allvalue.value) - 1;

            if (index >= 0 && index < elems.length) {
                elems[index].remove();
            }else{
                console.log("error");

            }
        }
 </script>

Output:

task 1 : to do list

<h2>To-Do List</h2>

    <input type="text" id="task" placeholder="Enter task">
    <button onclick="addTask()">Add</button>

    <ul id="list"></ul>

    <script>
        function addTask() {
            const input = document.getElementById("task");
            const task = input.value;

            if (task === "") {
                alert("Enter a task");
                return;
            }
            const li = document.createElement("li");
            li.textContent = task;
            document.getElementById("list").appendChild(li);
            input.value = "";
        }
    </script>

output:

task 2 : calculator

<h2>Calculator</h2>
    <input type="number" id="num1" placeholder="First Number">
    <input type="number" id="num2" placeholder="Second Number">
    <br><br>
    <button onclick="add()">+</button>
    <button onclick="sub()">-</button>
    <button onclick="mul()">*</button>
    <button onclick="div()">/</button>
    <h3 id="result">Result:</h3>
    <script>
        function add() {
            const a = Number(document.getElementById("num1").value);
            const b = Number(document.getElementById("num2").value);
            document.getElementById("result").textContent = "Result: " + (a + b);
        }
        function sub() {
            const a = Number(document.getElementById("num1").value);
            const b = Number(document.getElementById("num2").value);
            document.getElementById("result").textContent = "Result: " + (a - b);
        }
        function mul() {
            const a = Number(document.getElementById("num1").value);
            const b = Number(document.getElementById("num2").value);
            document.getElementById("result").textContent = "Result: " + (a * b);
        }
        function div() {
            const a = Number(document.getElementById("num1").value);
            const b = Number(document.getElementById("num2").value);
            document.getElementById("result").textContent = "Result: " + (a / b);
        }
    </script>

output: