JavaScript هي لغة برمجة متعددة الاستخدامات تسمح بإنشاء العناصر ومعالجتها مثل HTML (Hyper Text Markup Language). وهي تتبع الأسلوبين 'append ()' و 'appendChild ()' لأداء هذه الوظيفة. كما يوحي اسمها ، تقوم كلتا الطريقتين بإلحاق عناصر HTML مثل String أو Node Objects. ومع ذلك ، فهي تختلف عن بعضها البعض اعتمادًا على وظائفها وعوامل أخرى.
يسلط هذا الدليل الضوء على الاختلافات الرئيسية بين jQuery ' ألحق () 'وجافا سكريبت' إلحاق الطفل ()' طُرق.
قبل الانتقال إلى الاختلافات بين jQuery ' ألحق () 'وجافا سكريبت' إلحاق الطفل () '، ألقِ نظرة أولاً على أساسيات هذه الطرق.
ما هي طريقة jQuery append ()؟
مسج ' ألحق تُدرج طريقة () 'كائنات' Node 'و' String 'المرغوبة في النهاية كآخر عنصر تابع للعنصر الأصل.
بناء الجملة
$ ( محدد ) . ألحق ( محتوى و وظيفة ( فِهرِس و لغة البرمجة ) )في النحو أعلاه:
- محتوى : يشير إلى عناصر HTML أو عناصر DOM أو كائنات jQuery.
- وظيفة : إنها معلمة إضافية تحدد وظيفة JavaScript المعرفة من قبل المستخدم والتي لها معلمات 'index (موضع العنصر)' و 'html (html للعناصر المحددة)'.
ما هي طريقة JavaScript appendChild ()؟
طريقة 'appendChild ()' تضيف فقط كائن 'Node' بعد العنصر الفرعي الأخير للعنصر الأصل. يقوم أولاً بإنشاء كائن العقدة المطلوب باستخدام طريقة 'createElement ()' ثم يقوم بإلحاقه.
بناء الجملة
عنصر. إلحاق الطفل ( العقدة )يتطلب بناء الجملة هذا معلمة واحدة فقط ، أي ' العقدة '.
كما توحي أسمائهم ، تختلف الأساليب التي تمت مناقشتها أعلاه عن بعضها البعض. يوضح هذا القسم بعض العوامل التي تختلف فيها. دعونا نلقي نظرة عليهم.
الاختلافات بين jQuery append () وطريقة JavaScript appendChild ()
| شروط | jQuery append () | جافا سكريبت appendChild () |
|---|---|---|
| إستعمال | يمكن استخدامه لإلحاق العنصر الأصل بإضافة ' العقدة ' و ' خيط 'الأشياء في نفس الوقت. | يمكن استخدامه فقط لإلحاق العنصر الأصلي بواسطة ' العقدة 'تم إنشاؤه باستخدام' خلق العنصر ()' طريقة. |
| كائنات متعددة العقدة | ال ' ألحق () ”يمكن أن تضيف طريقة Node كائنات متعددة في العنصر الأصل المرتبط بها في نفس الوقت بالتنسيق التالي. شكل : “div.append (firstchild، secondchild، 'Linuxhint')؛' |
ال ' إلحاق الطفل تعمل طريقة () ”بشكل جيد مع كائنات Node متعددة ولكنها تلحق فقط الطفل الأول في كل مرة ثم الكائن التالي. شكل : “div.appendChild (firstchild، secondchild، 'Linuxhint')؛' |
| قيمة الإرجاع | ال ' ألحق طريقة () 'لا تُرجع كائن العقدة المُلحق لأنها تُظهر قيمة مُعادة' غير محددة '، أي شكل : console.log (appendChildValue) // undefined |
من ناحية أخرى ، فإن ' إلحاق الطفل () ”إرجاع قيمة تحتوي على كائن العقدة الملحقة. شكل : console.log (appendChildValue) // |
ننتقل الآن إلى التنفيذ العملي للاختلافات الرئيسية المدرجة.
الفرق 1: تطبيق أساليب jQuery append () و JavaScript appendChild ()
وفقًا للاختلاف الأول ، فإن ' ألحق () 'تلحق طريقة كل من Node و String بينما تلحق طريقة' appendChild () 'كائنات Node فقط.
كود HTML
أولاً ، ألق نظرة على كود HTML المذكور:
< جسم >< h2 > أسلوب jQuery 'append ()' < / h2 > // للإلحاق () < h2 > أسلوب jQuery 'appendChild ()' < / h2 > // من أجل appendChild ()
< زر بطاقة تعريف = 'btn1' عند النقر = 'myFunc1 ()' > إلحاق سلسلة DOM < / زر >
< زر بطاقة تعريف = 'btn2' عند النقر = 'myFunc2 ()' > إلحاق عقدة DOM < / زر >
< ص بطاقة تعريف = 'ل' > هذه فقرة. < / ص >
< رأ بطاقة تعريف = 'قائمة' >
< الذي - التي > دروس جافا سكريبت 1 < / الذي - التي >
< الذي - التي > دروس جافا سكريبت 2 < / الذي - التي >
< الذي - التي > دروس جافا سكريبت 3 < / الذي - التي >
< / رأ >
< / جسم >
في سطور الكود أعلاه:
- تحدد العلامة '
' العنوان الفرعي للمستوى 2.
- تضيف العلامات '
- تقوم العلامة '
' بإنشاء فقرة فارغة بمعرف معين 'الفقرة' لإظهار قيمة السلسلة الملحقة.
- تضيف العلامة '
- ' قائمة مرتبة بمعرف 'قائمة' ، والعناصر المدرجة بمساعدة العلامات '
- '.
ملحوظة : اتبع تعليمات HTML البرمجية المكتوبة أعلاه في الاختلاف الأول بين الطريقتين 'append ()' و 'appendChild ()'.
'append ()' طريقة jQuery Code
أولاً ، نظرة عامة على كود طريقة 'append ()':
< رأس >< النصي src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > النصي >
< النصي >
$ ( وثيقة ) . مستعد ( وظيفة ( ) {
$ ( '# btn1' ) . انقر ( وظيفة ( ) {
$ ( 'ص' ) . ألحق ( ' السلسلة الملحقة .' ) ؛
} ) ؛
$ ( '#btn2' ) . انقر ( وظيفة ( ) {
$ ( 'رأ' ) . ألحق ( '
} ) ؛
} ) ؛
النصي >
رأس >
في سطور الكود أعلاه:
- أولاً ، حدد jQuery ' CDN 'المسار من موقعه الرسمي على الويب' https://jquery.com/ 'بمساعدة' src ' يصف.
- بعد ذلك ، أضف قسمًا نصيًا صغيرًا يستخدم أولاً ' مستعد () 'لاستدعاء' وظيفة () 'عند تحميل مستند HTML.
- بعد ذلك ، ' انقر () 'طريقة تنفيذ الوظيفة المرتبطة بالزر المعرف الخاص به' BTN1 'عند النقر فوق الزر.
- في تعريف الوظيفة ، ' ألحق () ”تُستخدم لإلحاق عنصر الفقرة المستهدف بالسلسلة المحددة.
- تتم نفس العملية لـ ' قائمة مرتبة 'أي كائن Node لإلحاقه بالعنصر المحدد.
انتاج |
هنا ، تم التأكيد على إلحاق كلاً من كائنات 'String' و 'Node' بمساعدة طريقة 'append ()'.
أسلوب “appendChild ()” كود JavaScript
الآن ، انظر إلى طريقة JavaScript 'appendChild ()' عمليًا:
< النصي >وظيفة myFunc1 ( ) {
ل. إلحاق الطفل ( '
سلسلة ملحقة
) // إلحاق سلسلة DOM} وظيفة myFunc2 ( ) {
مقدار ثابت عنصر = وثيقة. خلق العنصر ( 'الذي - التي' ) ؛
مقدار ثابت العقدة = وثيقة. createTextNode ( 'عنصر مُلحق' ) ؛
عنصر. إلحاق الطفل ( العقدة ) ؛ // إلحاق عقدة DOM
مقدار ثابت عنصر = وثيقة. getElementById ( 'قائمة' ) ؛
عنصر. إلحاق الطفل ( عنصر ) ؛
}
النصي >
في مقتطف الشفرة أعلاه:
- تحديد اسم الوظيفة ' myFunc1 () 'التي تستخدم طريقة' appendChild () 'لإلحاق الفقرة المضافة بالسلسلة المحددة.
- بعد ذلك ، في ' myFunc2 () '، تقوم طريقة' createElement () 'بإنشاء عنصر قائمة جديد ثم تضيف بعض النص إليه باستخدام طريقة' createTextNode () '.
- بعد ذلك ، قم بإلحاق عقدة القائمة التي تم إنشاؤها بنصها باستخدام طريقة 'appendChild ()'.
- أخيرًا ، قم بإلحاق عقدة القائمة التي تم إنشاؤها حديثًا بالقائمة المرتبة التي تم الوصول إليها والتي يكون معرفها 'قائمة' بمساعدة طريقة 'appendChild ()'.
انتاج |
كما رأينا ، يتم إلحاق كائن 'Node' فقط عند النقر فوق الزر ، وليس 'String'.
خطأ
اضغط على 'F12' لفتح وحدة تحكم الويب وفحص المشكلة:
كما رأينا ، تُظهر وحدة التحكم خطأ في إلحاق كائن String باستخدام طريقة 'appendChild ()'. ومن ثم ، تم التأكيد على أن الطريقة “appendChild ()” لا تُلحق كائن String.
الفرق 2: تطبيق أساليب jQuery append () و JavaScript appendChild () على كائنات العقدة المتعددة
يمكن تحليل الاختلاف الثاني بين الطريقتين 'append ()' و 'appendChild ()' من خلال تنفيذ هاتين الطريقتين على كائنات عقدة متعددة. لمعرفة التنفيذ العملي لها ، اتبع الرموز المقدمة.
كود HTML
دعنا ننتقل من خلال كود HTML:
< شعبة بطاقة تعريف = 'main-div' >< شعبة أسلوب = 'display: flex؛ justify-content: center؛ align-items: center؛ width: 50px؛ height: 50px؛ background: orangered؛ margin: 10px؛ text-align: center؛' > واحد < / شعبة >
< شعبة أسلوب = 'display: flex؛ justify-content: center؛ align-items: center؛ width: 50px؛ height: 50px؛ background: orangered؛ margin: 10px؛ text-align: center؛' > اثنين < / شعبة >
< شعبة أسلوب = 'display: flex؛ justify-content: center؛ align-items: center؛ width: 50px؛ height: 50px؛ background: orangered؛ margin: 10px؛ text-align: center؛' > ثلاثة < / شعبة >
< / شعبة >
هنا ، تحتوي أسطر الكود أعلاه على عنصر '
ملحوظة : رمز HTML المكتوب أعلاه متبوع في الاختلاف الثاني بين الطريقتين 'append ()' و 'appendChild ()'.
append () الطريقة
الآن ، تابع البرنامج النصي التالي:
< النصي >مقدار ثابت maindiv = وثيقة. getElementById ( 'main-div' ) ؛
مقدار ثابت div4 = وثيقة. خلق العنصر ( 'div' ) ؛
div4. داخلي HTML = 'أربعة' ؛
div4. أسلوب . لون الخلفية = 'لون القرنفل' ؛
div4. قائمة الطبقة . يضيف ( 'div' ) ؛ مقدار ثابت div5 = وثيقة. خلق العنصر ( 'div' ) ؛
div5. داخلي HTML = 'خمسة' ؛
div5. أسلوب . لون الخلفية = 'لون القرنفل' ؛
div5. قائمة الطبقة . يضيف ( 'div' ) ؛
maindiv. ألحق ( div4 و div5 ) ؛
النصي >
في مقتطف الشفرة أعلاه:
- يصل المتغير 'maindiv' إلى 'div' المُضاف باستخدام معرفه 'main-div' بمساعدة طريقة 'getElementById ()'.
- بعد ذلك ، ينشئ أسلوب 'createElement ()' كائن عقدة 'div' جديد ، ويضيف النص المحدد باستخدام خاصية 'innerHTML' ، ويطبق لون الخلفية عبر خاصية 'style.backgroundcolor'.
- بعد ذلك ، تضيف طريقة 'add ()' خصائص CSS للفئة المحددة إليها باستخدام خاصية 'classList'.
- يتم اتباع نفس الإجراء لعنصر '' التالي المنشأ حديثًا.
- أخيرًا ، يتم إلحاق كائنات Node المنشأة حديثًا في نفس الوقت بمساعدة طريقة 'append ()'.
انتاج |
هنا ، يتم إلحاق كائنات العقدة المتعددة التي تم إنشاؤها حديثًا بنفس العنصر الأصل وفقًا لذلك.
طريقة 'appendChild ()'
بعد ذلك ، تابع باستخدام طريقة 'appendChild ()':
< النصي >
maindiv. إلحاق الطفل ( div4 ) ؛
maindiv. إلحاق الطفل ( div5 ) ؛
النصي >كما رأينا ، تضيف طريقة 'appendChild ()' كائنات متعددة للعقدة واحدة تلو الأخرى إلى نفس العنصر الأصل.
انتاج |
المخرجات هي نفسها طريقة 'append ()' ولكنها مختلفة في تحديد كائنات Node.
الفرق 3: إرجاع القيمة لطريقتين () appendChild () jQuery التطبيقية و JavaScript appendChild
الاختلاف الأخير هو 'القيمة المُعادة' للطريقتين 'append ()' و 'appendChild ()'. دعونا نرى ذلك عمليا.
ملحوظة : رمز HTML هو نفسه الاختلاف 2 (كائنات العقدة المتعددة).
طريقة 'append ()'
انظر إلى سطور التعليمات البرمجية المحددة:
< النصي >
وحدة التحكم. سجل ( maindiv. ألحق ( div4 ) ) ؛
النصي >هنا ، يتم تطبيق طريقة “console.log ()” للتحقق من القيمة التي تم إرجاعها للأسلوب “append ()” أثناء إلحاق كائن Node المحدد.
انتاج |
اضغط على 'F12' لفتح وحدة تحكم الويب:
كما رأينا ، فإن القيمة التي تم إرجاعها للطريقة 'append ()' هي ' غير معرف '.
طريقة appendChild ()
الآن ، ضع في اعتبارك الكود التالي باستخدام طريقة 'appendChild ()':
< النصي >
وحدة التحكم. سجل ( maindiv. إلحاق الطفل ( div4 ) ) ؛
النصي >حدد طريقة 'appendChild ()' باستخدام طريقة 'console.log ()' مثل طريقة 'append ()'.
انتاج |
هنا ، يقوم الناتج بإرجاع عنصر HTML الملحق بما في ذلك خصائص التصميم بدلاً من ذلك.
خاتمة
مسج ' ألحق () 'وجافا سكريبت' إلحاق الطفل () 'تختلف الطرق على أساس' التركيب 'و' الاستخدام 'و' كائنات العقدة المتعددة '. علاوة على ذلك ، فإن ' تم إرجاع القيم 'تختلف أيضًا عن بعضها البعض. كلتا الطريقتين مفيدتان ويعتمد استخدامهما على اختيارات المستخدم. أدرج هذا الدليل الفرق بين jQuery “ ألحق () 'وجافا سكريبت' إلحاق الطفل () 'عمليا.