createElement ו-appendChild

שיעור 12 מתוך 13 בקורס שיטות DOM ב-JavaScript של Coddy.

הפונקציה createElement() יוצרת רכיב HTML חדש עם שם התג שצוין (למשל, div, p, span). לדוגמה:

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

הפונקציה appendChild() מוסיפה רכיב צאצא שצוין כצאצא האחרון של רכיב אחר. כך אפשר לבנות ולשנות את ההיררכיה של תוכן דף האינטרנט שלך. לדוגמה:

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

בדוגמה שלמעלה, אנחנו יוצרים רכיב חדש p ומוסיפים אותו בתוך הרכיב parentElement.

אתגר

קל

ניתן לך קוד HTML שמכיל רשימה לא מסודרת עם מזהה myList.

השתמש רק ב-JavaScript כדי להוסיף פריט נוסף לרשימה הלא מסודרת ולהוסיף לו את הטקסט "Dog".

נסו בעצמכם

<!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>

כל השיעורים ביחידה שיטות DOM ב-JavaScript

1מבוא

מבוא מודל אובייקט המסמך

2שיטות DOM I

getElementById שינוי סגנון של אלמנט getElementsByClassName מעבר בלולאה ושינוי אלמנטים getElementsByTagName querySelector

3שיטות DOM II

querySelectorAll addEventListener innerHTMLcreateElement ו-appendChildהחלפת מצב באמצעות classList

תרגלו בעצמכם: Web אונליין