این آموزش در تاریخ ۱۴۰۱/۰۴/۲۳ آپدیت شده است.
آموزش متد createElement در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد createElement در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد createElement در DOM جاوااسکریپت
با استفاده از متد ()createElement میتونیم به راحتی یک یا چندین تگ رو در صفحه ایجاد نماییم ، این متد ۱ پارامتر میگیره که اونم نام اون تگی است که قراره ایجاد بشه.
وقتی تگ رو ایجاد کردیم باید با استفاده از متد ()appendChild اون تگ ایجاد شده رو در صفحه و در مکان مناسب قرار بدیم.
| مقدار برگشتی | برگشت اون تگی که ایجاد شده |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : ایجاد یک تگ h2 و سپس مشخص کردن متن داخل تگ و در نهایت ریختن متن به درون تگ و آخرم قرار دادن تگ ایجاد شده در صفحه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> // ایجاد تگ اچ2 var MyH2 = document.createElement('h2'); // مشخص کردن متن داخل تگ var MyContent = document.createTextNode("سایت آموزشی فری لرن"); // قرار دادن متن درون تگ اچ دو MyH2.appendChild(MyContent); // قرار دادن تگ درون تگ بادی document.body.appendChild(MyH2); </script> |
مثال شماره ۲ : دریافت یک آدرس یا URL از کاربر ، و سپس تولید تگ لینک یا همون تگ a در صفحه ( که کاربر وقتی روش کلیک میکنه به همون آدرسی که خودش مشخص کرده منتقل میشه )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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 |
<script> function Create(){ var Utag , Utext , CE , Ac , Result; Utag = document.getElementById("SelectTag").value; Utext = document.getElementById("Content").value; Result = document.getElementById("Result"); if( Utext == "" ){ alert("لطفا متن را مشخص کنید"); }else{ CE = document.createElement(Utag); Ac = document.createTextNode(Utext); CE.appendChild(Ac); Result.appendChild(CE); Result.style.display = "block"; } } </script> |
مثال شماره ۴ : ساختن تگ link و بعدش مشخص کردن صفت های مورد نیاز این تگ و در نهایت قرار دادن این تگ درون تگ head ( یعنی عملا ما ۲تا فایل CSS خارجی رو از طریق جاوا اسکریپت به صفحه مون وارد کردیم )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function Style_1(){ var mylink; // link ایجاد تگ mylink = document.createElement("link"); // مشخص کردن صفت های مورد نیاز mylink.setAttribute("rel","stylesheet"); mylink.setAttribute("type","text/css"); // مشخص کردن مسیر فایل سی اس اس mylink.setAttribute("href","files/mystyle-1.css"); // اضافه کردن تگ لینک به تگ هد document.head.appendChild(mylink); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()createElement | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.createElement( Tag_Name ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Tag_Name | ضروری – نام اون تگی که قراره ایجاد شه |
Free-Learn
نکات و توضیحات
- باید وقتی تگ جدید ایجاد میشه، حتما با استفاده از متد ()appendChild به درون صفحه درج شود.
