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

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

توسط

۱۳۹۹-۱۱-۲۱

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

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

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

Free-Learn

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

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

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

با استفاده از متد ()createElement میتونیم به راحتی یک یا چندین عنصر ( تگ ) رو در صفحه ایجاد نماییم ، این متد ۱ پارامتر میگیره که اونم نام اون عنصر یا تگی است که قراره ایجاد بشه.

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

مقدار برگشتی	برگشت گره عنصر یا تگ ایجاد شده
نسخه DOM	Core Level 1 Document Object

Free-Learn

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

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

مثال شماره ۱ : با کلیک بروی یک دکمه، یک لینک ( با صفت href و مقدار مشخص ) در صفحه ایجاد میشه.

<script>

function Make(){
 var mylink;
 mylink = document.createElement("a"); // a ایجاد تگ 
 mylink.innerHTML = "Go To Free-Learn"; // متن درون لینک
 mylink.setAttribute("href","https://free-learn.ir/"); // ست کردن صفت و مقدار
 document.body.appendChild(mylink); // درج لینک در صفحه
}

</script>

function Make(){

var mylink;

mylink = document.createElement("a"); // a ایجاد تگ

mylink.innerHTML = "Go To Free-Learn"; // متن درون لینک

mylink.setAttribute("href","https://free-learn.ir/"); // ست کردن صفت و مقدار

document.body.appendChild(mylink); // درج لینک در صفحه

}

</script>

امتحان کنید

مثال شماره ۲ : دریافت یک آدرس یا URL از کاربر ، و سپس تولید یک تگ لینک در صفحه ( که کاربر وقتی روش کلیک میکنه به همون آدرسی که خودش درست کرده منتقل میشه )

<script>

function tolid_link(){
 var mylink , mybox , user_url;
 mybox = document.getElementById("MyBox");
 user_url = document.getElementById("User_URL").value;
 
 if( user_url == "" ){
  alert("یه آدرس وارد کن");
 }
 else {
  mylink = document.createElement("a"); 
  mylink.innerHTML = "اینجا کلیک کن";
  mylink.setAttribute("href", user_url );
  mybox.appendChild(mylink);
 }
}

</script>

function tolid_link(){

var mylink , mybox , user_url;

mybox = document.getElementById("MyBox");

user_url = document.getElementById("User_URL").value;

if( user_url == "" ){

alert("یه آدرس وارد کن");

}

else {

mylink = document.createElement("a");

mylink.innerHTML = "اینجا کلیک کن";

mylink.setAttribute("href", user_url );

mybox.appendChild(mylink);

}

</script>

امتحان کنید

مثال شماره ۳ : کاربر میتونه تگ و متن داخل تگ رو خودش مشخص کنه بعدش با کلیک بروی یک دکمه اون تگ ایجاد میشه.

<script>

function Create(){

 var Utag , Utext , CE , Ac , Result;
 Utag   = document.getElementById("SelectTag").value;
 Utext  = document.getElementById("Content").value;
 Result = document.getElementById("MyBox");

 if( Utext == "" ){
   alert("لطفا متن را مشخص کنید");
 }
 else{
  CE = document.createElement(Utag);
  Ac = document.createTextNode(Utext);
  CE.appendChild(Ac);

  Result.appendChild(CE);
  Result.style.display = "block";
 }

}

</script>

function Create(){

var Utag , Utext , CE , Ac , Result;

Utag = document.getElementById("SelectTag").value;

Utext = document.getElementById("Content").value;

Result = document.getElementById("MyBox");

if( Utext == "" ){

alert("لطفا متن را مشخص کنید");

}

else{

CE = document.createElement(Utag);

Ac = document.createTextNode(Utext);

CE.appendChild(Ac);

Result.appendChild(CE);

Result.style.display = "block";

}

</script>

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

document.createElement( Node_Name );

1	document.createElement( Node_Name );

Free-Learn

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

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

مقدار	توضیح
Node_Name	ضروری – نام اون عنصر یا تگی که قراره ایجاد شه.

Free-Learn

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

باید وقتی تگ جدید ایجاد میشه، حتما با استفاده از متد ()appendChild به درون صفحه درج شود.

Free-Learn

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