آموزش متد createElement در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد createElement در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد createElement در DOM جاوااسکریپت
با استفاده از متد ()createElement
میتونیم به راحتی یک یا چندین عنصر ( تگ ) رو در صفحه ایجاد نماییم ، این متد ۱ پارامتر میگیره که اونم نام اون عنصر یا تگی است که قراره ایجاد بشه.
مقدار برگشتی | برگشت گره عنصر یا تگ ایجاد شده |
---|---|
نسخه 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> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
نام متد | Chrome | Firefox | Opera | Safari | IE |
()createElement | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
1 |
document.createElement( Node_Name ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
Node_Name | ضروری – نام اون عنصر یا تگی که قراره ایجاد شه. |
Free-Learn
نکات و توضیحات
- باید وقتی تگ جدید ایجاد میشه، حتما با استفاده از متد ()appendChild به درون صفحه درج شود.