insert Properties
خصائص للأدخال
في هذا الدرس سوف نتعرف علي مجموعة من الخواص التي نستخدمها في إضافة عناصر جديدة الي مستند الأكواد الخاص بالمشروع ونستطيع ايضا من خلال هذه العناصر تحديد المكان الذي نريد اضافة هذه العناصر اليه
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left insert Properties chevron_left JavaScript
insert Properties
</> insertAdjacentElement
تستخدم الدالة ( )insertAdjacentElement في أضافة عنصر جديد الي مستند الأكواد ونقوم بتحديد موقع هذه العنصر عن طريق مجموعة من ال parameters التي يمكننا تمريرها الي هذه الدالة وهم
- "afterbegin" : تضع العنصر بداخل عنصر أخر تقوم بتحديده وتقوم بتعيينه ك أول عنصر فرعي first child لهذا العنصر
- "beforeend" : تضع العنصر بداخل عنصر أخر تقوم بتحديده وتقوم بتعيينه ك اخر عنصر فرعي last child لهذا العنصر
- "afterend" : تقوم بوضع العنصر بعد عنصر معين
- "beforebegin" : تستخدم في وضع العنصر قبل عنصر معين
Syntax
node.insertAdjacentElement(position, element)
afterbeend
var s = document.getElementById("d1");
var h = document.getElementById("head3");
h.insertAdjacentElement("afterend", s);
beforebegin
var s = document.getElementById("mySpan");
var h = document.getElementById("myH2");
h.insertAdjacentElement("beforebegin", s);
</> insertAdjacentHTML
تستخدم الدالة ( )insertAdjacentElement في أضافة عنصر جديد من عناصر لغة ال HTML الي مستند الأكواد ونقوم بتحديد موقع هذه العنصر عن طريق مجموعة من ال parameters التي يمكننا تمريرها الي هذه الدالة وهم
- "afterbegin" : تضع العنصر بداخل عنصر أخر تقوم بتحديده وتقوم بتعيينه ك أول عنصر فرعي first child لهذا العنصر
- "beforeend" : تضع العنصر بداخل عنصر أخر تقوم بتحديده وتقوم بتعيينه ك اخر عنصر فرعي last child لهذا العنصر
- "afterend" : تقوم بوضع العنصر بعد عنصر معين
- "beforebegin" : تستخدم في وضع العنصر قبل عنصر معين
Syntax
node.insertAdjacentHTML(position, text)
afterbegin
h.insertAdjacentHTML("afterbegin", "<span style='color:red'>My span</span>");
beforebegin
h.insertAdjacentHTML("beforebegin", "<span style='color:red'>My span</span>");
beforeend
h.insertAdjacentHTML("beforeend", "<span style='color:red'>My span</span>");
</> insertAdjacentText
تستخدم الدالة ( )insertAdjacentElement في أضافة نص text الي الصفحة ونقوم بتحديد موقع هذه العنصر عن طريق مجموعة من ال parameters التي يمكننا تمريرها الي هذه الدالة وهم
- "afterbegin" : تضع العنصر بداخل عنصر أخر تقوم بتحديده وتقوم بتعيينه ك أول عنصر فرعي first child لهذا العنصر
- "beforeend" : تضع العنصر بداخل عنصر أخر تقوم بتحديده وتقوم بتعيينه ك اخر عنصر فرعي last child لهذا العنصر
- "afterend" : تقوم بوضع العنصر بعد عنصر معين
- "beforebegin" : تستخدم في وضع العنصر قبل عنصر معين
Syntax
node.insertAdjacentText(position, text)
afterbegin
var h = document.getElementById("myH2");
h.insertAdjacentText("afterbegin", "My inserted text");
E
beforebegin
var h = document.getElementById("myH2");
h.insertAdjacentText("beforebegin", "My inserted text");
beforeend
var h = document.getElementById("myH2");
h.insertAdjacentText("beforeend", "My inserted text");
</> insertBefore
- insertBefore () هي دالة نستخدم لاضافة عقدة فرعية child Node قبل عقدة أخرى للعقدة الأصلية المحددة.
- هي عبارة عن دالة تستخدم لأضافة عنصر فرعي child node بداخل عنصر أخر parent node وتجعلك تقوم بتحديد عنصر فرعي اخر بداخل العنصر الرئيسي لاضافة عنصر جديد قبله
Syntax
node.insertBefore(newnode, existingnode)
في هذا المثال نقوم بنقل عنصر "<li>" من قائمة "<ul>" الي قائمة "<ul> " اخري
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);
Example
var newItem = document.createElement("LI");
var textnode = document.createTextNode("Water");
newItem.appendChild(textnode);
var list = document.getElementById("myList");
list.insertBefore(newItem, list.childNodes[0]);
Example
let x = document.getElementById('weeks');
let add = document.createElement('li');
add.textContent = 'Tuesday';
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
