JS kullanarak HTML Enjekte Etme

Coddy'nin Hareketli Bulutlar - HTML/CSS/JS Projesi kursunda ders 15 / 18.

Önümüzdeki iki derste, JavaScript kullanarak bulutları enjekte edeceğiz!

document.getElementById() yöntemi, id özelliği belirtilen dizeyle eşleşen öğeyi temsil eden bir öğe nesnesi döndürür. Öğe kimliklerinin (ID), belirtildikleri takdirde benzersiz olmaları gerektiğinden, belirli bir öğeye hızlı bir şekilde erişmek için kullanışlı bir yoldur. Örneğin:

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

Aşağıdaki örnek, “myid” kimliğine sahip öğeyi alır ve onu elem adlı bir değişkende saklar.

Bir öğe nesnesini aldıktan sonra, onun iç HTML'ini (inner HTML) değiştirebilirsiniz:

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

Örneğin, HTML kodunuz şu şekildeyse:

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

Yukarıdaki enjeksiyondan sonra, HTML kodu şu şekilde görünecektir:

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

Görev

Kolay

Göreviniz, id değeri "container" (bulut konteynerimiz) olan öğenin içine "Some text" metnini içeren h1 etiketini enjekte etmektir.

Yeni kodu JavaScript dosyanızın başına ekleyin, halihazırda yapmış olduğunuz hiçbir şeyi silmeyin.

Not: Mevcut bulut öğesinin üzerine yazılacaktır, endişelenmeyin, bir sonraki derste bulutu geri getireceğiz.

Kendin dene

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>