הזרקת HTML באמצעות JS

שיעור 15 מתוך 18 בקורס עננים נעים - פרויקט HTML/CSS/JS של Coddy.

בשני השיעורים הבאים נזריק את העננים באמצעות JavaScript!

השיטה document.getElementById() מחזירה אובייקט של רכיב שמייצג את הרכיב שהמאפיין id שלו תואם למחרוזת שצוינה. מכיוון שמזהי רכיבים נדרשים להיות ייחודיים אם הם מצוינים, הם דרך שימושית לקבל במהירות גישה לרכיב מסוים. לדוגמה:

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

הדוגמה הבאה מקבלת את הרכיב עם המזהה “myid” ושומרת אותו במשתנה שנקרא elem.

לאחר שמקבלים אובייקט של רכיב, אפשר להחליף את ה-HTML הפנימי שלו:

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

לדוגמה, אם קוד ה-HTML שלך הוא:

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

לאחר ההזרקה שלמעלה, קוד ה-HTML ייראה כך:

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

אתגר

קל

המשימה שלך היא להוסיף את תגית h1 עם הטקסט "Some text" לאלמנט שה־id שלו שווה ל־“container” (המכל של הענן שלנו).

הוסף את הקוד החדש לתחילת קובץ ה־JavaScript שלך, ואל תמחק שום דבר שכבר עשית.

הערה: הוא אמור להחליף את אלמנט הענן הקיים. אל דאגה, נחזיר את הענן בשיעור הבא.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- כתבו כאן קוד HTML -->
        <script src="script.js"></script>
    </body>
</html>