خانه آموزش زبان جاوااسکریپت آموزش DOM در جاوااسکریپت متد insertAdjacentElement در DOM جاوااسکریپت

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

توسط

۱۴۰۰-۰۳-۲۱

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

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

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

Free-Learn

آنچه در این جلسه میخوانید :

1 متد insertAdjacentElement در DOM جاوااسکریپت
2 مثال از این متد
3 پشتیبانی مرورگرها
4 شکل نوشتاری
5 جدول پارامترها
6 نکات و توضیحات

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

با استفاده از متد ()insertAdjacentElement میتونیم یک عنصر ( تگ ) مشخص شده را در یک مکان مشخص شده قرار دهیم.

این متد ۲ پارامتر میگیره، پارامتر اول مکان قرار گیری را مشخص میکند و پارامتر دوم اون عنصر ( یا تگی ) که قرار است در مکان مشخص شده قرار بگیرد.

مقدار برگشتی	برگشت اون عنصری که انتقال داده شده و اگه انتقال به درستی انجام نشد null برگشت میده
نسخه DOM	–

Free-Learn

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

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

مثال شماره ۱ : با کلیک بروی یک دکمه، متن ” ?Khobi ” قبل از متن ” Salam ” قرار میگیره.

<script>

function set(){
 var text1 = document.getElementById("Text1");
 var text2 = document.getElementById("Text2");
 text2.insertAdjacentElement("afterend", text1);
}

</script>

function set(){

var text1 = document.getElementById("Text1");

var text2 = document.getElementById("Text2");

text2.insertAdjacentElement("afterend", text1);

}

</script>

امتحان کنید

مثال شماره ۲ : استفاده از موقعیت ( مکان ) afterbegin ( یعنی در داخل خوده عنصر و به عنوان فرزند اول قرار میگیره )

<script>

function set(){
 var text1 = document.getElementById("Text1");
 var text2 = document.getElementById("Text2");
 text1.insertAdjacentElement("afterbegin", text2);
}

</script>

function set(){

var text1 = document.getElementById("Text1");

var text2 = document.getElementById("Text2");

text1.insertAdjacentElement("afterbegin", text2);

}

</script>

امتحان کنید

مثال شماره ۳ : استفاده از ۴ مقدار ( afterbegin و afterend و beforebegin و beforeend )

<script>

function set1(){
 var text1 = document.getElementById("Text1");
 var text2 = document.getElementById("Text2");
 text1.insertAdjacentElement("afterbegin", text2);
}

function set2(){
 var text1 = document.getElementById("Text1");
 var text2 = document.getElementById("Text2");
 text1.insertAdjacentElement("afterend", text2);
}

function set3(){
 var text1 = document.getElementById("Text1");
 var text2 = document.getElementById("Text2");
 text1.insertAdjacentElement("beforebegin", text2);
}

function set4(){
 var text1 = document.getElementById("Text1");
 var text2 = document.getElementById("Text2");
 text1.insertAdjacentElement("beforeend", text2);
}

</script>

function set1(){

var text1 = document.getElementById("Text1");

var text2 = document.getElementById("Text2");

text1.insertAdjacentElement("afterbegin", text2);

}

function set2(){

var text1 = document.getElementById("Text1");

var text2 = document.getElementById("Text2");

text1.insertAdjacentElement("afterend", text2);

}

function set3(){

var text1 = document.getElementById("Text1");

var text2 = document.getElementById("Text2");

text1.insertAdjacentElement("beforebegin", text2);

}

function set4(){

var text1 = document.getElementById("Text1");

var text2 = document.getElementById("Text2");

text1.insertAdjacentElement("beforeend", text2);

}

</script>

امتحان کنید

Free-Learn

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

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

نام متد	Chrome	Firefox	Opera	Safari	IE
()insertAdjacentElement	بله	۴۸	بله	بله	۸

Free-Learn

شکل نوشتاری

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

Node.insertAdjacentElement( "Position" , Element_Name );

1	Node.insertAdjacentElement( "Position" , Element_Name );

Free-Learn

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

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

مقدار	توضیح
Position	ضروری – موقعیت یا مکان قرار گیری عنصر را مشخص میکند تنها مقادیر زیر قابل قبول می باشد afterbegin : در داخل عنصر، به عنوان فرزند اول قرار میگیره afterend : کلا بعد از عنصر قرار میگیره beforebegin : در داخل عنصر، به عنوان فرزند آخر قرار میگیره beforeend : کلا قبل از عنصر قرار میگیره
Element_Name	ضروری – اون عنصر ( تگی ) که قراره انتقال داده شه.

مقدار

توضیح

Position

ضروری – موقعیت یا مکان قرار گیری عنصر را مشخص میکند
تنها مقادیر زیر قابل قبول می باشد
afterbegin : در داخل عنصر، به عنوان فرزند اول قرار میگیره
afterend : کلا بعد از عنصر قرار میگیره
beforebegin : در داخل عنصر، به عنوان فرزند آخر قرار میگیره
beforeend : کلا قبل از عنصر قرار میگیره

Element_Name

ضروری – اون عنصر ( تگی ) که قراره انتقال داده شه.

Free-Learn

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

مقدار afterbegin عنصر / تگ مورد نظر رو به داخل عنصر مبدا و به عنوان فرزند اول اضافه میکنه ولی مقدار beforebegin عنصر / تگ مورد نظر رو به داخل عنصر مبدا و به عنوان فرزند آخر اضافه میکنه.

Free-Learn

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