این آموزش در تاریخ ۱۳۹۹/۱۲/۲۰ آپدیت شده است.
آموزش متد createElement در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد createElement در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد createElement در DOM جاوااسکریپت
با استفاده از متد ()createElement میتونیم به راحتی یک یا چندین عنصر ( تگ ) رو در صفحه ایجاد نماییم ، این متد ۱ پارامتر میگیره که اونم نام اون عنصر یا تگی است که قراره ایجاد بشه.
وقتی عنصر یا تگ رو ایجاد کردیم باید با استفاده از متد ()appendChild اون تگ ایجاد شده رو در صفحه و در مکان مناسب قرار بدیم.
| مقدار برگشتی | برگشت گره عنصر یا تگ ایجاد شده |
|---|---|
| نسخه DOM | Core Level 1 Document Object |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : با کلیک بروی یک دکمه، یک لینک ( با صفت href و مقدار مشخص ) در صفحه ایجاد میشه.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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 از کاربر ، و سپس تولید یک تگ لینک در صفحه ( که کاربر وقتی روش کلیک میکنه به همون آدرسی که خودش درست کرده منتقل میشه )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
مثال شماره ۳ : کاربر میتونه تگ و متن داخل تگ رو خودش مشخص کنه بعدش با کلیک بروی یک دکمه اون تگ ایجاد میشه.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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 ) صفحه رو تغییر و یا مشخص نماییم. ( یعنی با کلیک بروی دکمه استایل جدید به صفحه اضافه میشه یا تغییر میده )
|
1 2 3 4 5 6 7 8 |
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 اضافه کردن لینک به تگ } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | IE |
| ()createElement | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.createElement( Node_Name ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Node_Name | ضروری – نام اون عنصر یا تگی که قراره ایجاد شه. |
Free-Learn
نکات و توضیحات
- باید وقتی تگ جدید ایجاد میشه، حتما با استفاده از متد ()appendChild به درون صفحه درج شود.
