Sisipkan HTML dengan JS

Pelajaran 15 dari 18 dalam kursus Awan Bergerak, Proyek HTML/CSS/JS di Coddy.

Dalam dua pelajaran berikutnya, kita akan memasukkan awan menggunakan JavaScript!

Method document.getElementById() mengembalikan object elemen yang mewakili elemen dengan property id yang cocok dengan string yang ditentukan. Karena ID elemen harus unik jika ditentukan, ID menjadi cara yang berguna untuk mengakses elemen tertentu dengan cepat. Contohnya:

const elem = document.getElementById("myid");

Contoh berikut mengambil elemen dengan id “myid” dan menyimpannya dalam variabel bernama elem.

Setelah mendapatkan object elemen, kamu dapat mengganti HTML bagian dalamnya:

elem.innerHTML = '<p>Hello!</p>';

Contohnya, jika kode HTML-mu seperti ini:

<div id="myid">
</div>

Setelah penyisipan di atas, kode HTML akan terlihat seperti ini:

<div id="myid">
	<p>Hello!</p>
</div>

Tantangan

Mudah

Tugasmu adalah menyisipkan tag h1 dengan teks "Some text" ke dalam elemen yang id-nya sama dengan “container” (container cloud kita).

Tambahkan kode baru di awal file JavaScript-mu, jangan hapus apa pun yang sudah kamu kerjakan.

Catatan: Ini seharusnya menggantikan elemen cloud yang ada. Jangan khawatir, kita akan mengembalikan cloud pada pelajaran berikutnya.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
        <script src="script.js"></script>
    </body>
</html>