createElement و appendChild

الدرس 12 من 13 في دورة دوال JavaScript DOM على 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 يحتوي على قائمة غير مرتبة بمعرف (ID) 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>

جميع دروس دوال JavaScript DOM

1مقدمة

مقدمة Document Object Model

2طرق DOM (١)

getElementById تعديل نمط العنصر getElementsByClassName التكرار والمعالجة getElementsByTagName querySelector

3طرق DOM الجزء الثاني

querySelectorAll addEventListener innerHTMLcreateElement و appendChildتبديل classList