خانه آموزش زبان جاوااسکریپت آموزش 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>

امتحان کنید

مثال شماره ۴ : با کلیک بروی ۲تا دکمه میخوایم استایل ( فایل CSS ) صفحه رو تغییر و یا مشخص نماییم. ( یعنی با کلیک بروی دکمه استایل جدید به صفحه اضافه میشه یا تغییر میده )

function Style_1(){
 var mylink , myhead;
 mylink = document.createElement("link"); // LINK ایجاد تگ 
 mylink.setAttribute("rel","stylesheet"); // Rel تنظیم صفت 
 mylink.setAttribute("type","text/css");  // Type تنظیم صفت 
 mylink.setAttribute("href","files/mystyle-1.css"); // href تنظیم صفت 
 document.head.appendChild(mylink); // head اضافه کردن لینک به تگ 
}

function Style_1(){

var mylink , myhead;

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

mylink.setAttribute("rel","stylesheet"); // Rel تنظیم صفت

mylink.setAttribute("type","text/css"); // Type تنظیم صفت

mylink.setAttribute("href","files/mystyle-1.css"); // href تنظیم صفت

document.head.appendChild(mylink); // head اضافه کردن لینک به تگ

}

امتحان کنید

توضیح مثال بالا :

در مثال بالا ما خواستیم کاری کنیم که بتونیم با کلیک بروی یک دکمه ، استایل صفحه عوض شه ، یعنی عملا با کلیک بروی دکمه باید یک فایل CSS خارجی به صفحه اضافه شه.

پس من ۲ تا فایل CSS مجزا ایجاد کردم که قراره با کلیک بروی دکمه ها، این استایل ها به صفحه اضافه ( یا وارد ) شه.

در خط ۳ اومدیم و تگ Link رو ایجاد کردیم، و در خط های ۴ و ۵ و ۶ اومدیم صفت های مورد نیاز رو اضافه کردیم، صفت rel که مشخص میکنه اون فایل یک فایل استایل می باشد ، صفت Type برای مشخص کردن نوع فایل و در نهایت صفت href برای مشخص کردن مسیر آدرس فایل CSS

و در آخر در خط ۷ اومدیم و تگ link که درست کردیم به تگ head اضافه ( درجش ) کردیم.

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 یا پرینت این مطلب