انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 143
دورة جافا سكريبت

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
15
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,516
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

insertAdjacentElement

تستخدم الدالة ( )insertAdjacentElement في أضافة عنصر جديد الي مستند الأكواد ونقوم بتحديد موقع هذه العنصر عن طريق مجموعة من ال parameters التي يمكننا تمريرها الي هذه الدالة وهم 

  • "afterbegin" : تضع العنصر بداخل عنصر أخر تقوم بتحديده وتقوم بتعيينه ك أول عنصر فرعي first child لهذا العنصر 
  • "beforeend" : تضع العنصر بداخل عنصر أخر تقوم بتحديده وتقوم بتعيينه ك اخر عنصر فرعي last child لهذا العنصر 
  • "afterend" : تقوم بوضع العنصر بعد عنصر معين 
  • "beforebegin" : تستخدم في وضع العنصر قبل عنصر معين 

Syntax

HTML 
node.insertAdjacentElement(position, element)

afterbeend

HTML 
var s = document.getElementById("d1");
			var h = document.getElementById("head3");
			
			h.insertAdjacentElement("afterend", s);
جرّب بنفسك

beforebegin

HTML 
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

HTML 
node.insertAdjacentHTML(position, text)

afterbegin

HTML 
h.insertAdjacentHTML("afterbegin", "<span style='color:red'>My span</span>");
جرّب بنفسك

beforebegin

HTML 
h.insertAdjacentHTML("beforebegin", "<span style='color:red'>My span</span>");
جرّب بنفسك

beforeend

HTML 
h.insertAdjacentHTML("beforeend", "<span style='color:red'>My span</span>");
جرّب بنفسك

insertAdjacentText

تستخدم الدالة ( )insertAdjacentElement في أضافة نص text الي الصفحة ونقوم بتحديد موقع هذه العنصر عن طريق مجموعة من ال parameters التي يمكننا تمريرها الي هذه الدالة وهم 

  • "afterbegin" : تضع العنصر بداخل عنصر أخر تقوم بتحديده وتقوم بتعيينه ك أول عنصر فرعي first child لهذا العنصر 
  • "beforeend" : تضع العنصر بداخل عنصر أخر تقوم بتحديده وتقوم بتعيينه ك اخر عنصر فرعي last child لهذا العنصر 
  • "afterend" : تقوم بوضع العنصر بعد عنصر معين 
  • "beforebegin" : تستخدم في وضع العنصر قبل عنصر معين 

Syntax

HTML 
node.insertAdjacentText(position, text)

afterbegin

HTML 
var h = document.getElementById("myH2");
h.insertAdjacentText("afterbegin", "My inserted text");
E
جرّب بنفسك

beforebegin

HTML 
var h = document.getElementById("myH2");
h.insertAdjacentText("beforebegin", "My inserted text");
جرّب بنفسك

beforeend

HTML 
var h = document.getElementById("myH2");
h.insertAdjacentText("beforeend", "My inserted text");
جرّب بنفسك

insertBefore

  •  insertBefore () هي دالة نستخدم لاضافة عقدة فرعية child Node قبل عقدة أخرى للعقدة الأصلية المحددة.
  • هي عبارة عن دالة تستخدم لأضافة عنصر فرعي child node بداخل عنصر أخر parent node وتجعلك تقوم بتحديد عنصر فرعي اخر بداخل العنصر الرئيسي لاضافة عنصر جديد قبله 

Syntax

HTML 
node.insertBefore(newnode, existingnode)

في هذا المثال نقوم بنقل عنصر "<li>" من قائمة "<ul>" الي قائمة "<ul> " اخري

HTML 
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);
جرّب بنفسك

Example

HTML 
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

HTML 
let x = document.getElementById('weeks');  
        let add = document.createElement('li');  
        add.textContent = 'Tuesday';
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…