DEV Community

Kiruthiga S
Kiruthiga S

Posted on

DOM(part-6) 

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <h1 id="title">Hello World</h1>
    <button onclick="change()">Change</button>
    <script>

    const head=document.getElementById("title");
    console.log(head.innerText);

    const heading=document.createElement("h1");
    heading.innerText="Welcome to Javascript";
    document.body.appendChild(heading);
    console.log(heading);

    const h=document.createElement("h2");
    h.innerText="Welcome to DOM";
    document.body.appendChild(h);
    console.log(h);
    h.remove();
    // document.body.removeChild(h);
     function change(){
        head.innerText="Bye World "
    }

    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode 
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
     <h1 id="h1"></h1>
    <button onclick="create()">Create</button>
    <script>

    const heading=document.createElement("h1");
    heading.innerText="Welcome to Javascript";
    document.body.appendChild(heading);
    console.log(heading);
    document.body.insertBefore(heading, document.getElementById("h1"));

    const h=document.createElement("h2");
    h.innerText="Welcome to DOM";
    document.body.appendChild(h);
    console.log(h);

     function create(){
        const head=document.getElementById("h1");
        console.log(head);
        head.innerText="Hello World "

    }

    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode 
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <h4 id="one">4</h4>
    <h4 id="two">6</h4>
    <h4 id="three">5</h4>
    <h4 id="four">10</h4> 
    <input id="num" type="number">
    <button onclick="delete1()">Delete</button>
    <script>
            var num = document.getElementById("num");
            var element = document.querySelectorAll("h4");

        function delete1(){
            var index = Number(num.value) ;

            if (index >= 0 && index < element.length) {
                element[index].remove();
            }
            else {
                alert("Invalid Index");
            }
        }
        console.log(element);
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)