code/dom_appendchild_vs_insertbefore.html at main · rafaelqg/code · 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
<html>
    <head>
        <style>
            header, article, form, footer{
                border: 1px solid black;
                margin: 20px;
                padding: 20px
            }

        </style>
        <script>
            function domDemo(){
                let body = document.body;
                let children = body.children;
                let childNodes = body.childNodes;
                console.log(children, childNodes);

                let newElement = document.createElement("button");
                newElement.innerText = "Click here to do something";
                //body.appendChild(newElement);
                body.insertBefore(newElement,children[2]);

            }
        </script>
    <head>
    <body onload="domDemo()">
        <header>
            <h1>Document Object Model: appendChild() vs insertBefore()</h1>
        </header>
        <article>
            It is an article
        </article>
        <form>
            It is a form
        </form>
        <footer>
            It is a footer
        </footer>
    </body>

</html>