3 تفاوت اصلی متد های ()append و ()appendChild در جاوا اسکریپت

در این مطلب می خواهم شما را با 3 تفاوت اصلی و مهم متد های ()append و ()appendChild در زبان شیرین جاوا اسکریپت آشنا کنم که می تواند در خیلی از پروژه هاتون در جاهایی به شما کمک کند پس همراه من تا آخر این مطلب باشید .

متد های ()append و ()appendChild چیست؟

اول از همه بیایید بفهمیم اصلا این متد چیست به چه دردی می خورد و کلاً با مفهومش آشنا بشیم ...

اگر بخواهم بطور مفهومی و کوتاه به تعریف این دو تا متد بپردازم می گویم: ()append و ()appendChild متد هایی در زبان جا وا اسکریپت است که برای اضافه کردن المنت html که از طریق js ساخته شود را به داخل تگ های html ما به کار می رود با این 2 تا متد می توانیم هر تگ htmlی که در جاوا اسکریپت ساخته می شود را به داخل تگ های html اضافه کنیم.

تفاوت های بین متد های ()append و ()appendChild :

append() VS appendChild() :

این دو تا متد متد های کاربردی و اساسی در زبان جاوا اسکریپت هستند که اثر افراد برنامه نویس اینطور فکر می کنند که تفاوتی میان این دو تا متد وجود ندارد و از تفاوت های بین این دو متد نا آگاه هستند ولی این متد ها 3 تفاوت اصلی و مهمی دارند که در پایین برایتان می آورم:

تفاوت اول :

متد ()appendChild نمی تواند ورودی بجز یک المنت html دریافت کند یعنی ورودی یا پارامتر متد ()appendChild باید یک المنت html باشد نه string یا ... ولی ما با متد ()append می توانیم string یا متنی را داخل ورودی یا پارامتر این متد قرار دهیم. مثال:

• در متد ()append

ulElem.append(newLiTag);    <= صحیح | Element html

ulElem.append(&quothello world&quot);    <= صحیح | String

• در متد ()appendChild

ulElem(newLiTag);    <= صحیح | Element html

ulElem(&quothello world&quot);    <= غلط | String

تفاوت دوم :

متد ()append می تواند چندین ورودی را بگیرد یعنی هر چند تعداد می توانیم بهش ورودی بدهیم از نوع string یا Element html، ولی متد ()appendChild نمی تواند بیشتر از یک ورودی بگیرد اگه ما بیایم پیش از یک ورودی را بهش بدیم این متد اولین پارامتر یا همان ورودی را می گیرد و بقیه ورودی ها را اصلاً حساب نمی کند(اضافه نمی کند).

• در متد ()append

ulElem.append(firstLiTag, secondLiTag ); 
//Adds all parameters | We can give it multiple inputs .

• در متد ()appendChild

ulElem(firstLiTag, secondLiTag );
// Adds the first parameter | We can not give it multiple inputs .

تفاوت سوم:

زمانی که بخواهیم این متد ها را در درون متغییری ذخیره کنیم و return کنیم متد ()append هیچ چیزی را return نمی کند یعنی undefined بر می گرداند ولی متد ()appendChild مقداری را برای ما return می کند که همان المنتی است که برای ما اضافه کرده است.

• در متد ()append

let appendResult = ulElem.append(firstLiTag);
console.log(appendResult); 
// return undefined.

• در متد ()appendChild

let appendResult = ulElem(firstLiTag);
console.log(appendResult);
// return It returns a value for us, which is the same element that it added for us.

این کار متد ()appendChild باعث شده در بعضی جاها تو بعضی قسمت های برخی پروژه ها ممکنه برای ما
این متد کاربردی بوده باشه .

سخن پایانی:

ما با تعریف و مفهوم متد های ()append و ()appendChild و تفاوت های بین این متد در زبان جاوا اسکریپت آشنا شدیم که در بیشتر پروژه ها به ما کمک می کند.

خیلی ممنونم که تا آخر این مطلب با من بودید، امیدوارم این مطلب برای شما مفید بوده، بفرستید به دوستای برنامه نویستون آن ها هم از این مطلب استفاده کنند ?❤️