JavaScript

insert Properties
خصائص للأدخال

في هذا الدرس سوف نتعرف علي مجموعة من الخواص التي نستخدمها في إضافة عناصر جديدة الي مستند الأكواد الخاص بالمشروع ونستطيع ايضا من خلال هذه العناصر تحديد المكان الذي نريد اضافة هذه العناصر اليه 

التاريخ

15 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

756

المواضيع

24
الشروحات 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';
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.