javascript/28_understanding_DOM3.html at main · Rishav07-05/javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learning DOM</title>
</head>
<body style="background-color: black; color: peachpuff;">
    <ul class="language">
        <li>JAVASCRIPT</li>
    </ul>
</body>
<script>
    //ADDING ELEMENT
    // 1ST METHOD
    // function addlang(langName){
    //     const li = document.createElement('li')
    //     li.innerHTML = `${langName}`
    //     document.querySelector('.language').appendChild(li)
    // }
    // addlang("PYHTON IS BEST")

    // 2ND METHOD
    function addlang(langName){
        const li = document.createElement('li');
        li.appendChild(document.createTextNode(langName))
        document.querySelector('.language').appendChild(li)
        }
    addlang("PYHTON")
    addlang("GO")
    addlang("RUST")


    // EDIT
    const secondlang = document.querySelector("li:nth-child(3)")
    // secondlang.innerHTML = "RUBY"
    const newli = document.createElement('li')
    newli.textContent = "RUBY"
    secondlang.replaceWith(newli)
    newli.style.color = "red"

    // EDIT
    const firstlang = document.querySelector("li:first-child")
    firstlang.outerHTML = "<li>REACT</li>"

    // REMOVING
    const lastlang = document.querySelector("li:last-child")
    lastlang.remove()
</script>
</html>