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

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

توسط

۱۴۰۰-۰۳-۲۲

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

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

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

Free-Learn

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

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

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

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

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

Free-Learn

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

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

مثال شماره ۱ : با کلیک بروی یک دکمه ، یک متن / محتوا مشخص شده قبل از عنصر مورد نظر ما قرار میگیره.

<script>

function set(){
 var text1 = "Www.Free-Learn.IR - ";
 var text2 = document.getElementById("Text2");
 text2.insertAdjacentText("afterbegin", text1);
}

</script>

function set(){

var text1 = "Www.Free-Learn.IR - ";

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

text2.insertAdjacentText("afterbegin", text1);

}

</script>

امتحان کنید

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

<script>

function set1(){
 var text1 = "<h2 id='Text2'>Www.Free-Learn.IR</h2>";
 var text2 = document.getElementById("Text2");
 text2.insertAdjacentHTML("afterbegin", text1);
}

function set2(){
 var text1 = "<h2 id='Text1'>Www.Free-Learn.IR</h2>";
 var text2 = document.getElementById("Text2");
 text2.insertAdjacentHTML("afterend", text1);
}

function set3(){
 var text1 = "<h2 id='Text1'>Www.Free-Learn.IR</h2>";
 var text2 = document.getElementById("Text2");
 text2.insertAdjacentHTML("beforebegin", text1);
}

function set4(){
 var text1 = "<h2 id='Text1'>Www.Free-Learn.IR</h2>";
 var text2 = document.getElementById("Text2");
 text2.insertAdjacentHTML("beforeend", text1);
}

</script>

function set1(){

var text1 = "<h2 id='Text2'>Www.Free-Learn.IR</h2>";

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

text2.insertAdjacentHTML("afterbegin", text1);

}

function set2(){

var text1 = "<h2 id='Text1'>Www.Free-Learn.IR</h2>";

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

text2.insertAdjacentHTML("afterend", text1);

}

function set3(){

var text1 = "<h2 id='Text1'>Www.Free-Learn.IR</h2>";

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

text2.insertAdjacentHTML("beforebegin", text1);

}

function set4(){

var text1 = "<h2 id='Text1'>Www.Free-Learn.IR</h2>";

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

text2.insertAdjacentHTML("beforeend", text1);

}

</script>

امتحان کنید

Free-Learn

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

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

نام متد	Chrome	Firefox	Opera	Safari	IE
()insertAdjacentText	۱	۴۸	۱۲٫۱	۴	۵

Free-Learn

شکل نوشتاری

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

Node.insertAdjacentText( "Position" , "Text" );

1	Node.insertAdjacentText( "Position" , "Text" );

Free-Learn

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

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

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

مقدار

توضیح

Position

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

Text

ضروری – اون متن / محتوایی که قراره انتقال داده شه.

Free-Learn

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

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

Free-Learn

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