DOM-API/22-insertAdjacentHTML.html at master · NovaBam123/DOM-API · 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Insert Adjacent HTML</title>
    <!--
    Merupakan method interface element yang mengurai(parse) teks yang ditentukan sebagai HTML atau XML dan menyisipkan node yang dihasilkan ke dalam pohon DOM pada posisi yang ditentukan.
    SYNTAX:
    insertAdjacentHTML(position, text)

    PARAMETER POSITION:
    1. "beforebegin"
        Menyisipkan konten sebelum elemen, hanya berlaku jika element berada dalam pohon DOM dan memiliki element induk.
    2. "afterbegin"
        Menyisipkan konten tepat didalam element, sebelum anak pertama-nya.
    3. "beforeend"
        Menyisipkan konten tepat setelah anak terakhirnya.
    4. "afterend"
        Menyisipkan konten setelah element. hanya berlaku jika element memiliki element induk.
    html= <div id="myElement">Hello</div>
    <p>Before begin</p>
    <div id="myElement">
    <p>After begin</p>
    Hello
    <p>Before end</p>
    </div>
    <p>After end</p>

    PERBEDAAN DG APPENDCHILD
    _Metode insertAdjacent lebih flexible karena dapat menyisipkan berbagai posisi dengan appendChild.
    _insertAdjacent digunakan untuk menyisipkan string HTML sedangkan appendChild untuk node DOM.
    PENGGUNAAN MASING2:
    -INSERTADJACENT: cocok digunakan jika ingin menyisipkan string HTML yg kompleks atau hanya ingin menyisipkan element pada posisi tertentu.(tidak hanya anak terakhir).
    -APPENDCHILD: jika sudah memiliki element DOM yand dibuat dengan createElement() atau hanya menyisipkan element yang sudah ada dalam variabel js.


    -->

<style>
    h1, h2{
        background-color: black;
        color: lime;
    }
    h1+ select, button{
        padding: 6px 2px;
        font-size: 18px;
        border: 1px solid rgb(202, 200, 200);
        border-radius: 5px;
        background-color: skyblue;
        box-shadow: inset 2px 2px 4px black;
        font-weight: 700;
        cursor: pointer;
        +button{
            padding: 7px;
            font-size: 16px;
            transition: all 0.2s ease-out;
            margin-right: 5px;
        }
        + #insert{
            margin-left: 50px;
        }
    }
    button:hover{
        transform: scale(1.1);
    }
    p{
        font-size: 18px;
    }
    .new{
        font-size: 24px;
        padding: 3px;
        border: 1px solid rgba(190, 187, 187, 0.6);
        border-radius: 5px;
        box-shadow: inset 2px 2px 4px white;
        background-color: hotpink;
    }
</style>
</head>
<body>
    <h1>METHOD INSERT ADJACENT HTML</h1>
    <select>
        <option>beforebegin</option>
        <option>afterbegin</option>
        <option>beforeend</option>
        <option>afterend</option>
        <option>appendChild</option>
    </select>
    <button id="insert">Insert HTML</button>
    <button id="reset">Reset</button>

    <h2>01. BEFORE BEGIN</h2>
    <p>
        Some text, with a <code id="subject01">code-formatted element</code> inside it.
    </p>

    <h2>02. AFTER BEGIN</h2>
    <p>
        Some text, with a <code id="subject02">code-formatted element</code> inside it.
    </p>

    <h2>03. BEFORE END</h2>
    <p>
        Some text, with a <code id="subject03">code-formatted element</code> inside it.
    </p>

    <h2>04. AFTER END</h2>
    <p>
        Some text, with a <code id="subject04">code-formatted element</code> inside it.
    </p>

    <h1>METHOD APPEND CHILD</h2>
    <p>
        Some text, with a <code id="subject05">code-formatted element</code> inside it.
    </p>

<script>
    let p01= document.getElementById("subject01"),
    p02= document.getElementById("subject02"),
    p03= document.getElementById("subject03"),
    p04= document.getElementById("subject04"),
    p05= document.getElementById("subject05"),
    insert= document.getElementById("insert"),
    reset= document.getElementById("reset"),
    positionSelect= document.querySelector("select");

    insert.addEventListener("click", e=> {
        let selected = positionSelect.value;
        const els= {
            beforebegin: p01,
            afterbegin: p02,
            beforeend: p03,
            afterend: p04
        }
        if(els[selected]) {
            els[selected].insertAdjacentHTML(selected, "<span class='new'>Inserted text</span> ")
            return;
        } else {
            append();
        }
    });
    reset.addEventListener("click", e=>{
        document.querySelectorAll(".new").forEach(el=>el.remove())
    })
    // bisa juga dengan cara ini:
    // reset.addEventListener("click", () => {
    //     document.location.reload();
    // });

    function append(){
        let newSpan= document.createElement("span");
        let newText= document.createTextNode(" Inserted Text")
        newSpan.classList.add("new")
        newSpan.appendChild(newText);
        p05.appendChild(newSpan);
    }
</script>
</body>
</html>