حقن HTML باستخدام JS

الدرس 15 من 18 في دورة سحب متحركة - مشروع HTML/CSS/JS على Coddy.

في الدرسين القادمين، سنقوم بحقن السحب باستخدام JavaScript!

تُرجع الطريقة document.getElementById() كائن عنصر يمثل العنصر الذي تطابق خاصية الـ id الخاصة به السلسلة المحددة. نظرًا لأن معرفات العناصر (IDs) يجب أن تكون فريدة إذا تم تحديدها، فهي وسيلة مفيدة للوصول إلى عنصر معين بسرعة. على سبيل المثال:

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>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>