createElement and appendChild

Pelajaran 12 dari 13 dalam kursus Metode DOM JavaScript di Coddy.

Fungsi createElement() membuat elemen HTML baru dengan nama tag yang ditentukan (misalnya, div, p, span). Contohnya:

const newElement = document.createElement("p");

Fungsi appendChild() menyisipkan elemen anak yang ditentukan sebagai anak terakhir dari elemen lain. Ini memungkinkan kamu menyusun dan mengubah hierarki konten halaman webmu. Contohnya:

const childElement = document.createElement("p");
childElement.textContent = "This is a new child element.";
parentElement.appendChild(childElement);

Pada contoh di atas, kita membuat elemen baru p dan menyisipkannya ke dalam elemen parentElement.

Tantangan

Mudah

Kamu diberi kode HTML yang berisi unordered list dengan ID myList.

Hanya dengan menggunakan JavaScript, tambahkan satu item list lagi ke unordered list tersebut dan tambahkan teks "Dog" ke dalamnya.

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <ul id="animals">
            <li>Cow</li>
            <li>Ant</li>
            <li>Bear</li>
            <li>Camel</li>
        </ul>
        <script src="script.js"></script>
    </body>
</html>

Semua pelajaran di Metode DOM JavaScript

1Pengantar

Pengantar Document Object Model

2Metode DOM I

getElementById Ubah Gaya Elemen getElementsByClassName Telusuri dan Manipulasi getElementsByTagName querySelector

3Method DOM II

querySelectorAll addEventListener innerHTMLcreateElement and appendChildclassList toggle

Latihan sendiri: Playground Web