MyDOMJourney/Nodes.html at main · BitBySwift/MyDOMJourney · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nodes</title>
</head>
<body style="background-color: #212121; color: white;">
<script>
    // Let's create some html element like h1 or div using javascript

          const div = document.createElement('div')
             console.log(div)

             div.className = "main"
             div.id = Math.round(Math.random() * 10 + 1)    //It will generate random class

             div.setAttribute("title", "Generated-attribute")


             div.style.backgroundColor = "red"
             div.style.color = "white"
             div.style.padding = "5px"
             div.style.borderRadius = "5px"

             div.innerText = "Hello can you see the text !? I 'm asking. (If you can see it then Hurrah. all the things happening via js)"  //Tips: innertext always get the value and replace and setAttribute just set the value in it.


            // I am going to show my text in the web page using js only.
             const addText =  document.createTextNode = "Hello it was difficult but we made it!"
             console.log(addText)
            //  div.appendChild(addText)

             document.body.appendChild(div)


</script>
</body>
</html>