آموزش متد appendChild در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد appendChild در DOM جاوااسکریپت با من همراه باشید.

متد appendChild در DOM جاوااسکریپت

Free-Learn

متد appendChild در DOM جاوااسکریپت

با استفاده از متد ()appendChild میتونیم یک گره ( گره متن یا گره عنصر ) رو به یک گره دیگه اضافه ( یا درج ) کنیم.

بفرض مثال ما اومدیم یک تگ جدید ایجاد کردیم، حال این تگ جدید رو میخوایم درون صفحه به نمایش درآوریم، خب همینجاست که باید از appendChild استفاده نماییم و اون تگ جدید رو درون صفحه درج یا اضافش کنیم.

با استفاده از متد createElement میتونیم یک عنصر یا تگ جدید در جاوااسکریپت تولید نماییم.

با استفاده از متد createTextNode میتونیم یک متن یا محتوارو به یک عنصر یا تگ اضافه نماییم.

مقدار برگشتی برگشت گره ای که درج یا اضافه شده
نسخه DOM Core Level 1 Node Object

Free-Learn

مثال از این متد

در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : اول اومدیم با استفاده از متد createElement یک تگ P ایجاد کردیم، بعدش اومدیم متن ” سایت آموزشی فری لرن ” رو درش قرار دادیم و در نهایت با استفاده از appendChild همین تگ رو به صفحه ( تگ Body ) اضافه کردیم.

امتحان کنید

توضیح مثال بالا :

در مثال بالا اگه توجه کنید در خط ۷ و ۸ ما ۲بار از appendChild استفاده کردیم، خب گفتیم که این متد برای درج کردن هست، پس در خط ۷ اومدیم متن رو به درون تگ درج کردیم و دوباره در خط ۸ اومدیم و خوده تگ رو به درون صفحه ( تگ body ) درج کردیم.

مثال شماره ۲ : در این مثال ما میخوایم اون تگی که ایجاد میکنیم رو در یک تگ دلخواه درج کنیم، مثلا میخوایم در تگ Div درجش کنیم.

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.

نام متد Chrome Firefox Opera Safari IE
()appendChild بله بله بله بله بله

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.

Free-Learn

جدول پارامترها

در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.

مقدار توضیح
Node_Name ضروری – نام اون گره ای که قراره اضافه یا درج شه.

Free-Learn

نکات و توضیحات

  • این متد وقتی گره ای رو اضافه میکنه ، همیشه اون گره رو به عنوان آخرین فرزند عنصر اضافه میکنه – یعنی اگه یه باکس داشته باشیم و داخل این باکس عدد ۱ وجود داشته باشه، حال اگه گره ای رو به داخل همین باکس درج کنیم، اون گره بعد از عدد ۱ قرار میگیره. ( همانند مثال های شماره ۱ یا ۲ )
  • حال اگه خواستید گره رو به مکان خاص ( مثلا قبل از فلان عنصر ) اضافه کنید خیلی راحت میتونید از متد  insertBefore استفاده نمایید.

Free-Learn

دریافت PDF یا پرینت این مطلب