آموزش طراحی سایت (HTML CSS Javascript) | آتریا

متد element.insertBefore

مثال (متد element.insertBefore)

اضافه کردن یک عنصر <li> جدید، قبل از اولین عنصر فرزند عنصر <ul>:

var newItem = document.createElement("LI")        // Create a <li> node
var textnode = document.createTextNode("Water")   // Create a text node
newItem.appendChild(textnode)                     // Append the text to <li>

var list = document.getElementById("myList")      // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]);   // Insert <li> before the first child of <ul>

قبل از اضافه کردن:

Coffee
Tea

بعد از اضافه کردن:

Water
Coffee
Tea

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

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

نکته: اگر شما می خواهید یک آیتم لیست جدید به همراه متن، ایجاد کنید به یاد داشته باشید که متن مورد نظر را باید به عنوان یک گره متنی، ایجاد کنید. و سپس آن را به عنصر <li> اضافه کرده و بعد این عنصر را به لیست اضافه کنید.

شما همچنین می توانید از متد insertBefore برای اضافه کردن یا جابه جا کردن یک عنصر موجود استفاده کنید.

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

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

متد
insertBefore()	1.0	بله	1.0	بله	بله

نحوه استفاده

node.insertBefore(newnode,existingnode)

مقادیر پارامترها

پارامتر	Type	توضیحات
newnode	Node object	ضروری. شیء گره ای که شما می خواهید اضافه کنید.
existingnode	Node object	اختیاری. گره فرزندی که شما می خواهید گره جدید را قبل از آن اضافه کنید. اگر این پارامتر تعریف نشود، متد insertBefore، گره جدید را در آخر تمام گره ها اضافه می کند.

جزئیات تکنیکی

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

مثال - خودتان امتحان کنید

مثال (متد element.insertBefore)

انتقال یک عنصر <li> از یک لیست به یک لیست دیگر:

var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);

قبل از اضافه کردن:

Coffee
Tea

Water
Milk

بعد از اضافه کردن:

Milk
Coffee
Tea

Water

خودتان امتحان کنید »

کلیه توابع و خصوصیت های شیء Element در JavaScript

: نوشته شده توسط احسان عباسی; بازدید: 6222

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی