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

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

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

Free-Learn

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

با استفاده از متد ()insertBefore میتونیم یک گره خاص ( مشخص شده ) را به قبل از یک گره دیگه ( که از قبل وجود داره ) اضافه و یا انتقال بدیم.

این متد ۲ پارامتر میگیره که پارامتر اول اون گره ای ایست که قراره اضافه / انتقال داده شه و پارامتر دوم اون گره ای ایست که قراره گره جدید به قبل از آن اضافه شه.

اگه بجای پارامتر دوم از کلمه کلیدی null استفاده نمایید، گره جدید همواره به آخره گره فعلی اضافه میشه ( یعنی به عنوان فرزند آخر )

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

Free-Learn

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

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

مثال شماره ۱ : ایجاد یک تگ جدید ( H2 ) و سپس اضافه / انتقال دادن تگ جدید به قبل از تگ موجود ( P ) در صفحه.

امتحان کنید

مثال شماره ۲ : اضافه کردن آیتم جدید به یک لیست ( آیتم ها به ابتدای لیست اضافه میشود )

امتحان کنید

مثال شماره ۳ : گرفتن یک متن از کاربر و اضافه کردن اون متن به یک لیست

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

Free-Learn

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

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

مقدار توضیح
New-Node ضروری – اون گره جدید که قراره اضافه یا انتقال داده شه.
Existing-Node ضروری – اون گره ای که قراره، گره جدید به قبل از آن اضافه شه.
اگه null استفاده کنید ، گره جدید به عنوان آخرین فرزند گره اضافه خواهد شد ( مثال )

Free-Learn

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

  • همونطور که گفتم این متد ۲ پارامتر میگیره که پارامتر اول اون گره ای ایست که قراره اضافه یا انتقال داده شه و پارامتر دوم اون گره ای ایست که قراره گره جدید به قبل از آن اضافه شه. ( مثلا میخوایم یک آیتم جدید به لیست اضافه کنیم، خب پارامتر اول میشه آیتم جدیدمون و پارامتر دوم میشه یکی از آیتم های فعلی موجود در لیست )
  • اگه در پارامتر دوم از کلمه کلیدی null استفاده شود ، گره جدید همواره به عنوان آخرین فرزند اضافه خواهد شد ( مثال )

Free-Learn

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