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

Creation Methods

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

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

createAttribute

  • تستخدم الدالة ( )createAttribute في أنشاء attribute معين لعنصر من عنصر ال HTML باستخدام لغة ال JavaScript 
  • تستخدم الخاصية " ( )attribute.value " في تحديد قيمة لل attribute 

Syntax

HTML 
document.createAttribute(attributename)

Example

HTML 
var att = document.createAttribute("class");
  att.value = "democlass";
جرّب بنفسك

createComment

هي عبارة عن دالة تستخدم في أنشاء تعليق comment ويتم وضع هذا التعليق بداخل كود ال HTML 

في المثال التالي قمنا بأنشاء دالة تقوم بتنفيذ الكود الخاص بأنشاء تعليق في كود ال html وبما أن التعليقات لا يتم رؤيتها في صفحة المتصفح فيمكنك رؤية الدالة عن طريق عمل inspect وملاحظة التغيير الذي يحدث عند الضغط علي الزر 

createComment

Example

HTML 
function myFunction() {
  var c = document.createComment("My personal comments");
  document.body.appendChild(c);
  var x = document.getElementById("demo");
جرّب بنفسك

createDocumentFragment

  • تستخدم هذه createDocumentFragment الدالة في انشاء عنصر مماثل لعنصر أخر أي انه يحتوي علي جميع الدوال والصفات الخاصة به 
  • الدالة createDocumentFragment تستخدم عادة عندما تريد استخراج أجزاء معينة من الصفحة واجراء شيء معين علي هذا الجزء مثل حذف او اضافة او التعديل علي بعض المحتوي الموجود بداخلها 
  • يمكنك أيضًا استخدام كائن window الخاص بالمستند لإجراء هذه التغييرات ، ولكن لمنع تدمير بنية المستند ، قد يكون من الآمن استخراج أجزاء فقط من المستند وإجراء التغييرات التي تريدها  وارجاع هذا الجزء مرة أخرى الي المستند.

Syntax

HTML 
document.createDocumentFragment()

Example

HTML 
var d = document.createDocumentFragment();
  d.appendChild(document.getElementsByTagName("LI")[0]);
  d.childNodes[0].childNodes[0].nodeValue = "Milk";
  document.getElementsByTagName("UL")[0].appendChild(d)
جرّب بنفسك

createElement

  • تستخدم الدالة creacteElement في انشاء عنصر "HTML " تقوم بتحديد نوعه انت 
  • يجب استخدام دالة ( )appendChild مع دالة ( )createElement لتحديد المكان الذي سوف يتم خلاله انشاء العنصر الجديد 
  • ونستخدم أيضا الدالة ( )innerHTML لتحديد النص الذي سوف يظهر فوق هذا الزر 

Syntax

HTML 
document.createElement(nodename)

Example

HTML 
var btn = document.createElement("BUTTON");   /* Create a <button> element */
btn.innerHTML = "CLICK ME";                   /* Insert text */
document.body.appendChild(btn);               /* Append <button> to <body> */
جرّب بنفسك

createEvent

تستخدم الدالة ( )createEvent في انشاء حدث event معين مثل تحريك الماوس 

- في المثال التالي قمنا بأنشاء event يقوم بزيادة عدد النجوم عند تحريك الماوس فوقها 

Syntax

HTML 
var event = document.createEvent(type);

Example

HTML 
var x = document.createEvent("MouseEvent");
x.MouseEvent("mouseover" );
جرّب بنفسك

createTextNode

  • تستخدم دالة ( )createTextNode في أنشاء نص معين يتم اضافته بداخل الصفحة دون وضعه في أي عنصر من عناصر ال HTML 

Example

في هذا المثال قمنا بأنشاء نص دون وضعه بداخل أي عنصر

HTML 
var t = document.createTextNode("Hello World");
  document.body.appendChild(t);
جرّب بنفسك

Example

HTML 
var h = document.createElement("H1");
  var t = document.createTextNode("Hello World");
  h.appendChild(t);
  document.body.appendChild(h);
جرّب بنفسك
  • في هذا المثال قمنا بأنشاء نص باستخدام دالة createTextNode  ثم قمنا بأنشاء عنصر "H1" باستخدام دالة createElement  
  • بعد ذلك قمنا بإضافة النص الذي قمنا بأنشائه بداخل العنصر "H1" عن طريق الدالة ( )appendChild 

مشاركة

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

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