این آموزش در تاریخ ۱۴۰۱/۰۶/۰۲ آپدیت شده است.
آموزش متد insertBefore در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد insertBefore در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد insertBefore در DOM جاوااسکریپت
با استفاده از متد ()insertBefore میتونیم یک گره فرزند رو به قبل از یک گره دیگه ( که از قبل وجود داره ) اضافه و یا انتقال بدیم.
این متد ۲ پارامتر میگیره که پارامتر اول اون گره که قراره اضافه / انتقال داده شه و پارامتر دوم اون گره ای که قراره گره جدید به قبل از آن اضافه شه.
اگه بجای پارامتر دوم از کلمه کلیدی null استفاده نمایید، گره جدید همواره به آخره گره فعلی اضافه میشه ( یعنی به عنوان فرزند آخر ) همانند مثال شماره ۲
| مقدار برگشتی | برگشت شئ گره ای که اضافه یا انتقال داده شده |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : اضافه کردن آیتم جدید به یک لیست ( آیتم ها به ابتدای لیست اضافه میشوند )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function Set(){ var MyList , New_Item , Text_In_New_Item; MyList = document.getElementById("MyList"); New_Item = document.createElement("LI"); Text_In_New_Item = document.createTextNode("Free-Learn"); New_Item.appendChild(Text_In_New_Item); MyList.insertBefore(New_Item, MyList.childNodes[0]); } </script> |
مثال شماره ۲ : گرفتن یک متن از کاربر و اضافه کردن اون متن به یک لیست
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> function Add(){ var MyList ,YourName, New_item, Text_In_New_Item; MyList = document.getElementById("MyList"); YourName = document.getElementById("YourName").value; New_item = document.createElement("LI"); Text_In_New_Item = document.createTextNode(YourName); New_item.appendChild(Text_In_New_Item); if( YourName == "" ){ alert("لطفا یه چیزی وارد کن"); }else{ MyList.insertBefore(New_item, null); YourName = document.getElementById("YourName").value = ""; } } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()insertBefore | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.insertBefore( Jadid , Ghadim ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Jadid | ضروری – اون گره جدید که قراره اضافه شه |
| Ghadim | ضروری – اون گره ای که قراره، گره جدید به قبل یا بعد از آن اضافه شه اگه از null استفاده کنید ، گره جدید به عنوان آخرین فرزند اضافه میشه |
Free-Learn
نکات و توضیحات
- اگه در پارامتر دوم از کلمه کلیدی null استفاده شود ، گره جدید همواره به عنوان آخرین فرزند اضافه خواهد شد ( همانند مثال شماره ۲ )
