jQuery append() بمقابلہ JavaScript appendChild() طریقوں کی وضاحت کریں

JavaScript ایک ورسٹائل پروگرامنگ لینگویج ہے جو HTML (ہائپر ٹیکسٹ مارک اپ لینگویج) جیسے عناصر کی تخلیق اور ہیرا پھیری کی اجازت دیتی ہے۔ یہ اس فعالیت کو انجام دینے کے لیے 'ضمیمہ()' اور 'appendChild()' طریقوں کی پیروی کرتا ہے۔ جیسا کہ ان کے نام سے پتہ چلتا ہے، دونوں طریقے HTML عناصر جیسے String یا Node آبجیکٹ کو شامل کرتے ہیں۔ تاہم، وہ اپنی فعالیت اور دیگر عوامل کے لحاظ سے ایک دوسرے سے مختلف ہیں۔

یہ گائیڈ jQuery کے درمیان اہم فرق کو واضح کرتا ہے۔ شامل کریں ()' اور جاوا اسکرپٹ ' بچے کو شامل کریں۔ ()' طریقے۔

jQuery کے درمیان اختلافات پر جانے سے پہلے ' شامل کریں ()' اور جاوا اسکرپٹ ' بچے کو شامل کریں۔ ()' طریقے، پہلے ان طریقوں کی بنیادی باتوں پر ایک نظر ڈالیں۔

jQuery ضمیمہ () طریقہ کیا ہے؟

jQuery ' شامل کریں ()' طریقہ مطلوبہ 'Node' اور 'String' اشیاء کو آخر میں بنیادی عنصر کے آخری چائلڈ کے طور پر داخل کرتا ہے۔

نحو

$ ( سلیکٹر ) . شامل کریں ( مواد ، فنکشن ( انڈیکس ، html ) )

مندرجہ بالا نحو میں:

مواد : اس سے مراد HTML عناصر، DOM عناصر، یا jQuery اشیاء ہیں۔
فنکشن : یہ ایک اضافی پیرامیٹر ہے جو صارف کی وضاحت کردہ JavaScript فنکشن کو بتاتا ہے جس میں 'انڈیکس (عنصر کی پوزیشن)' اور 'html (منتخب عناصر کا html)' پیرامیٹرز ہوتے ہیں۔

JavaScript appendChild() طریقہ کیا ہے؟

'appendChild()' طریقہ صرف والدین کے عنصر کے آخری بچے کے بعد 'Node' آبجیکٹ کو شامل کرتا ہے۔ یہ پہلے 'createElement()' طریقہ کا استعمال کرتے ہوئے مطلوبہ نوڈ آبجیکٹ بناتا ہے اور پھر اسے جوڑتا ہے۔

نحو

عنصر بچے کو شامل کریں۔ ( نوڈ )

اس نحو کے لیے صرف ایک پیرامیٹر کی ضرورت ہوتی ہے یعنی ' نوڈ '

جیسا کہ ان کے ناموں سے پتہ چلتا ہے، اوپر زیر بحث طریقے ایک دوسرے سے مختلف ہیں۔ اس حصے میں کچھ عوامل کا پتہ چلتا ہے جن پر وہ مختلف ہیں۔ آئیے ان پر ایک نظر ڈالتے ہیں۔

jQuery append() اور JavaScript appendChild() طریقہ کے درمیان فرق

شرائط	jQuery ضمیمہ ()	جاوا اسکرپٹ اپینڈ چائلڈ()
استعمال	اسے نیا شامل کرکے بنیادی عنصر کو شامل کرنے کے لئے استعمال کیا جاسکتا ہے۔ نوڈ 'اور' تار 'ایک ہی وقت میں اشیاء.	یہ صرف نئے کے ذریعہ بنیادی عنصر کو شامل کرنے کے لئے استعمال کیا جاسکتا ہے۔ نوڈ 'کا استعمال کرتے ہوئے بنایا گیا' تخلیق عنصر ()' طریقہ۔
ایک سے زیادہ نوڈ آبجیکٹ	' شامل کریں ()' طریقہ درج ذیل فارمیٹ میں ایک ہی وقت میں متعدد نوڈ آبجیکٹ کو اپنے متعلقہ بنیادی عنصر میں شامل کر سکتا ہے۔ فارمیٹ : 'div.append(firstchild, secondchild, 'Linuxhint');'	' بچے کو شامل کریں۔ ()' طریقہ متعدد نوڈ آبجیکٹ کے ساتھ ٹھیک کام کرتا ہے لیکن یہ صرف ایک وقت میں پہلے بچے کو جوڑتا ہے اور پھر اگلا۔ فارمیٹ : 'div.appendChild(firstchild, secondchild, 'Linuxhint');'
واپسی کی قیمت	' شامل کریں ()' طریقہ ضمیمہ نوڈ آبجیکٹ کو واپس نہیں کرتا ہے کیونکہ یہ ایک 'غیر متعینہ' لوٹی ہوئی قدر کو ظاہر کرتا ہے یعنی فارمیٹ : console.log(appendChildValue) // undefined	دوسری طرف، ' بچے کو شامل کریں۔ ()' طریقہ ضمیمہ نوڈ آبجیکٹ پر مشتمل ایک قدر واپس کرتا ہے۔ فارمیٹ : console.log(appendChildValue) // )

شرائط

jQuery ضمیمہ ()

جاوا اسکرپٹ اپینڈ چائلڈ()

استعمال

اسے نیا شامل کرکے بنیادی عنصر کو شامل کرنے کے لئے استعمال کیا جاسکتا ہے۔ نوڈ 'اور' تار 'ایک ہی وقت میں اشیاء.

یہ صرف نئے کے ذریعہ بنیادی عنصر کو شامل کرنے کے لئے استعمال کیا جاسکتا ہے۔ نوڈ 'کا استعمال کرتے ہوئے بنایا گیا' تخلیق عنصر ()' طریقہ۔

ایک سے زیادہ نوڈ آبجیکٹ

' شامل کریں ()' طریقہ درج ذیل فارمیٹ میں ایک ہی وقت میں متعدد نوڈ آبجیکٹ کو اپنے متعلقہ بنیادی عنصر میں شامل کر سکتا ہے۔

فارمیٹ : 'div.append(firstchild, secondchild, 'Linuxhint');'

' بچے کو شامل کریں۔ ()' طریقہ متعدد نوڈ آبجیکٹ کے ساتھ ٹھیک کام کرتا ہے لیکن یہ صرف ایک وقت میں پہلے بچے کو جوڑتا ہے اور پھر اگلا۔

فارمیٹ : 'div.appendChild(firstchild, secondchild, 'Linuxhint');'

واپسی کی قیمت

' شامل کریں ()' طریقہ ضمیمہ نوڈ آبجیکٹ کو واپس نہیں کرتا ہے کیونکہ یہ ایک 'غیر متعینہ' لوٹی ہوئی قدر کو ظاہر کرتا ہے یعنی

فارمیٹ : console.log(appendChildValue) // undefined

دوسری طرف، ' بچے کو شامل کریں۔ ()' طریقہ ضمیمہ نوڈ آبجیکٹ پر مشتمل ایک قدر واپس کرتا ہے۔

فارمیٹ : console.log(appendChildValue) //

)

اب درج کردہ کلیدی اختلافات کے عملی نفاذ کی طرف بڑھیں۔

فرق 1: jQuery append() اور JavaScript appendChild() طریقوں کو لاگو کرنا

پہلے فرق کے مطابق، ' شامل کریں ()' طریقہ نوڈ اور سٹرنگ دونوں کو جوڑتا ہے جبکہ 'appendChild()' طریقہ صرف نوڈ آبجیکٹ کو جوڑتا ہے۔

HTML کوڈ

پہلے، بیان کردہ HTML کوڈ پر ایک نظر ڈالیں:

< جسم >
< h2 > jQuery 'ضمیمہ ()' طریقہ < / h2 > // ضمیمہ کے لیے() < h2 > jQuery 'appendChild()' طریقہ < / h2 > // AppendChild() کے لیے
< بٹن آئی ڈی = 'btn1' کلک پر = 'myFunc1()' > DOM سٹرنگ شامل کریں۔ < / بٹن >
< بٹن آئی ڈی = 'btn2' کلک پر = 'myFunc2()' > DOM نوڈ شامل کریں۔ < / بٹن >
< ص آئی ڈی = 'کے لیے' > یہ ایک پیراگراف ہے۔ < / ص >
< ol آئی ڈی = 'فہرست' >
< کہ > جاوا اسکرپٹ ٹیوٹوریل 1 < / کہ >
< کہ > جاوا اسکرپٹ ٹیوٹوریل 2 < / کہ >
< کہ > جاوا اسکرپٹ ٹیوٹوریل 3 < / کہ >
< / ol >
< / جسم >

مندرجہ بالا کوڈ لائنوں میں:

'
' ٹیگ سطح 2 کی ذیلی سرخی کی وضاحت کرتا ہے۔
'
'
' ٹیگ منسلک سٹرنگ ویلیو دکھانے کے لیے تفویض کردہ id 'para' کے ساتھ ایک خالی پیراگراف بناتا ہے۔
'
1. ' ٹیگز کی مدد سے فہرست کردہ اشیاء کو شامل کرتا ہے۔

نوٹ : اوپر لکھے ہوئے HTML کوڈ کو 'ضمیمہ()' اور 'appendChild()' دونوں طریقوں کے پہلے فرق میں فالو کریں۔

'ضمیمہ ()' طریقہ jQuery کوڈ

سب سے پہلے، 'ضمیمہ()' طریقہ jQuery کوڈ کا جائزہ:

< سر >
< سکرپٹ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' >> سکرپٹ >
< سکرپٹ >
$ ( دستاویز ) . تیار ( فنکشن ( ) {
$ ( '#btn1' ) . کلک کریں ( فنکشن ( ) {
$ ( 'p' ) . شامل کریں ( ' ضمنی اسٹرنگ ۔' ) ;
} ) ;
$ ( '#btn2' ) . کلک کریں ( فنکشن ( ) {
$ ( 'اول' ) . شامل کریں ( '

ضمنی نوڈ

' ) ;
} ) ;
} ) ;
سکرپٹ >
سر >
مندرجہ بالا کوڈ لائنوں میں:

سب سے پہلے، jQuery کی وضاحت کریں ' سی ڈی این 'اس کی سرکاری ویب سائٹ سے راستہ' https://jquery.com/ 'کی مدد سے' src ' وصف.

اگلا، ایک چھوٹا اسکرپٹ سیکشن شامل کریں جو پہلے استعمال کرتا ہے ' تیار ()' بیان کرنے کا طریقہ ' فنکشن ()' جب HTML دستاویز کو لوڈ کیا جاتا ہے۔

اس کے بعد، ' کلک کریں ()' طریقہ اس فنکشن کو انجام دیتا ہے جو بٹن کے ساتھ منسلک ہے جس کی آئی ڈی ہے ' btn1 بٹن پر کلک کریں۔

فنکشن کی تعریف میں، ' شامل کریں ()' طریقہ بیان کردہ سٹرنگ کے ساتھ ہدف شدہ پیراگراف عنصر کو شامل کرنے کے لیے استعمال کیا جاتا ہے۔

اسی عمل کو شامل کیا جاتا ہے ' آرڈر کی فہرست 'یعنی، نوڈ آبجیکٹ کو دی گئی آئٹم میں شامل کرنے کے لیے۔

آؤٹ پٹ

یہاں، اس بات کی تصدیق ہوتی ہے کہ 'String' اور 'Node' دونوں آبجیکٹ 'append()' طریقہ کی مدد سے جوڑے گئے ہیں۔

'appendChild()' طریقہ جاوا اسکرپٹ کوڈ

اب جاوا اسکرپٹ کے 'appendChild()' طریقہ کو عملی طور پر دیکھیں:
< سکرپٹ >
فنکشن myFunc1 ( ) {
کے لیے بچے کو شامل کریں۔ ( '
ضمنی اسٹرنگ
' ) // DOM سٹرنگ شامل کریں۔
} فنکشن myFunc2 ( ) {
const عنصر = دستاویز تخلیق عنصر ( 'وہ' ) ;
const نوڈ = دستاویز ٹیکسٹ نوڈ بنائیں ( 'ضمنی چیز' ) ;
عنصر بچے کو شامل کریں۔ ( نوڈ ) ; // DOM نوڈ شامل کریں۔
const عنصر = دستاویز getElementById ( 'فہرست' ) ;
عنصر بچے کو شامل کریں۔ ( عنصر ) ;
}
سکرپٹ >
مندرجہ بالا کوڈ کے ٹکڑوں میں:

فنکشن کا نام متعین کریں ' myFunc1 ()' جو دی گئی سٹرنگ کے ساتھ شامل پیراگراف کو شامل کرنے کے لیے 'appendChild()' طریقہ استعمال کرتا ہے۔

اگلا، میں ' myFunc2 ()' فنکشن، 'createElement()' طریقہ ایک نئی فہرست عنصر بناتا ہے اور پھر 'createTextNode()' طریقہ استعمال کرتے ہوئے اس میں کچھ متن شامل کرتا ہے۔

اس کے بعد، 'appendChild()' طریقہ استعمال کرتے ہوئے تخلیق کردہ فہرست نوڈ کو اس کے متن کے ساتھ شامل کریں۔

آخر میں، نئی تخلیق شدہ فہرست نوڈ کو رسائی شدہ آرڈر شدہ فہرست میں شامل کریں جس کی id 'appendChild()' طریقہ کی مدد سے 'لسٹ' ہے۔

آؤٹ پٹ

جیسا کہ دیکھا گیا ہے، بٹن پر کلک کرنے پر صرف 'نوڈ' آبجیکٹ شامل ہوتا ہے، 'سٹرنگ' نہیں۔

خرابی

ویب کنسول کو کھولنے اور مسئلہ کا معائنہ کرنے کے لیے 'F12' دبائیں:

جیسا کہ دیکھا گیا ہے، کنسول 'appendChild()' طریقہ کا استعمال کرتے ہوئے String آبجیکٹ کو شامل کرنے میں ایک غلطی دکھاتا ہے۔ لہذا، اس بات کی تصدیق ہوتی ہے کہ 'appendChild()' طریقہ String آبجیکٹ کو شامل نہیں کرتا ہے۔

فرق 2: jQuery append() اور JavaScript appendChild() طریقوں کو ایک سے زیادہ نوڈ آبجیکٹ پر لاگو کرنا

'Append()' اور 'appendChild()' طریقوں کے درمیان دوسرے فرق کا تجزیہ متعدد نوڈ اشیاء پر ان طریقوں کو انجام دے کر کیا جا سکتا ہے۔ اس کے عملی نفاذ کو دیکھنے کے لیے دیے گئے کوڈز پر عمل کریں۔

HTML کوڈ

آئیے HTML کوڈ کو دیکھتے ہیں:
< div آئی ڈی = 'مین-ڈیو' >
< div انداز = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orrangered; margin:10px; text-align:center;' > ایک < / div >
< div انداز = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orrangered; margin:10px; text-align:center;' > دو < / div >
< div انداز = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orrangered; margin:10px; text-align:center;' > تین < / div >
< / div >
یہاں، مندرجہ بالا کوڈ لائنوں میں ایک اہم '
' عنصر ہے جس میں id 'main-div' ہے اور پھر اس کے اندر تین '
' عناصر درج ذیل اسٹائلنگ اوصاف کے ساتھ اپنی مرضی کے مطابق ہیں۔

نوٹ : اوپر لکھا ہوا HTML کوڈ 'append()' اور 'appendChild()' دونوں طریقوں کے دوسرے فرق میں فالو کیا جاتا ہے۔

ضمیمہ () طریقہ

اب، درج ذیل اسکرپٹ کے ساتھ آگے بڑھیں:
< سکرپٹ >
const maindiv = دستاویز getElementById ( 'مین-ڈیو' ) ;
const div4 = دستاویز تخلیق عنصر ( 'div' ) ;
div4. اندرونی ایچ ٹی ایم ایل = 'چار' ;
div4. انداز . پس منظر کا رنگ = 'گلابی' ;
div4. کلاس لسٹ . شامل کریں ( 'div' ) ; const div5 = دستاویز تخلیق عنصر ( 'div' ) ;
div5. اندرونی ایچ ٹی ایم ایل = 'پانچ' ;
div5. انداز . پس منظر کا رنگ = 'گلابی' ;
div5. کلاس لسٹ . شامل کریں ( 'div' ) ;

maindiv شامل کریں ( div4 , div5 ) ;
سکرپٹ >
مندرجہ بالا کوڈ کے ٹکڑوں میں:

'maindiv' متغیر 'getElementById()' طریقہ کی مدد سے اپنی id 'main-div' کا استعمال کرتے ہوئے شامل کردہ 'div' تک رسائی حاصل کرتا ہے۔

اس کے بعد، 'createElement()' طریقہ ایک نیا 'div' نوڈ آبجیکٹ بناتا ہے، 'innerHTML' پراپرٹی کا استعمال کرتے ہوئے مخصوص متن کو شامل کرتا ہے، اور 'style.backgroundcolor' پراپرٹی کے ذریعے پس منظر کا رنگ لاگو کرتا ہے۔

اس کے بعد، 'add()' طریقہ 'classList' پراپرٹی کا استعمال کرتے ہوئے اس میں مخصوص کلاس CSS پراپرٹیز کو شامل کرتا ہے۔

اگلے نئے بنائے گئے '
' عنصر کے لیے بھی یہی طریقہ کار اپنایا جاتا ہے۔

آخر میں، دونوں نئے بنائے گئے نوڈ آبجیکٹ ایک ہی وقت میں 'append()' طریقہ کی مدد سے شامل کیے جاتے ہیں۔

آؤٹ پٹ

یہاں، نئے بنائے گئے ایک سے زیادہ نوڈ آبجیکٹ کو اسی پیرنٹ عنصر کے مطابق جوڑ دیا گیا ہے۔

'appendChild()' طریقہ

اگلا، 'appendChild()' طریقہ کے ساتھ جاری رکھیں:
< سکرپٹ >
maindiv بچے کو شامل کریں۔ ( div4 ) ;
maindiv بچے کو شامل کریں۔ ( div5 ) ;
سکرپٹ >
جیسا کہ دیکھا گیا ہے، 'appendChild()' طریقہ ایک سے ایک نوڈ آبجیکٹ کو ایک ہی پیرنٹ عنصر میں شامل کرتا ہے۔

آؤٹ پٹ

آؤٹ پٹ 'ضمیمہ ()' طریقہ کی طرح ہے لیکن نوڈ آبجیکٹ کی وضاحت میں مختلف ہے۔

فرق 3: اپلائیڈ jQuery append() اور JavaScript appendChild() طریقوں کی ریٹرن ویلیو

آخری فرق 'ضمیمہ()' اور 'appendChild()' طریقوں کی 'واپسی قدر' ہے۔ آئیے اسے عملی طور پر دیکھتے ہیں۔

نوٹ : HTML کوڈ فرق 2 (متعدد نوڈ آبجیکٹ) جیسا ہی ہے۔

'ضمیمہ ()' طریقہ

کوڈ کی دی گئی لائنوں کو دیکھیں:
< سکرپٹ >
تسلی. لاگ ( maindiv شامل کریں ( div4 ) ) ;
سکرپٹ >
یہاں، مخصوص نوڈ آبجیکٹ کو شامل کرتے ہوئے 'ضمیمہ()' طریقہ کی واپسی ویلیو کو چیک کرنے کے لیے 'console.log()' طریقہ استعمال کیا جاتا ہے۔

آؤٹ پٹ

ویب کنسول کھولنے کے لیے 'F12' دبائیں:

جیسا کہ دیکھا گیا ہے، 'ضمیمہ()' طریقہ کار کی لوٹائی گئی قدر ہے ' غیر متعینہ '

appendChild() طریقہ

اب، 'appendChild()' طریقہ کو استعمال کرتے ہوئے درج ذیل کوڈ پر غور کریں:
< سکرپٹ >
تسلی. لاگ ( maindiv بچے کو شامل کریں۔ ( div4 ) ) ;
سکرپٹ >
'console.log()' طریقہ کے ساتھ 'appendChild()' طریقہ کی وضاحت کریں جیسا کہ 'append()' طریقہ ہے۔

آؤٹ پٹ

یہاں، آؤٹ پٹ منسلک عنصر ایچ ٹی ایم ایل کو واپس کرتا ہے جس میں اسٹائل کی خصوصیات شامل ہیں۔

نتیجہ

jQuery ' شامل کریں ()' اور جاوا اسکرپٹ ' بچے کو شامل کریں۔ ()' طریقے ان کی بنیاد پر مختلف ہیں۔ نحو'، 'استعمال'، اور 'متعدد نوڈ آبجیکٹ ' مزید یہ کہ ان کا ' واپسی اقدار 'بھی ایک دوسرے سے مختلف ہیں۔ دونوں طریقے کارآمد ہیں اور ان کا استعمال صارف کے انتخاب پر منحصر ہے۔ اس گائیڈ نے jQuery کے درمیان فرق درج کیا ہے۔ شامل کریں ()' اور جاوا اسکرپٹ ' بچے کو شامل کریں۔ ()' طریقہ عملی طور پر۔