این آموزش در تاریخ ۱۳۹۹/۱۲/۲۰ آپدیت شده است.

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

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

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

Free-Learn

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

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

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

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

Free-Learn

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

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

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

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

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

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

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

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

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

Free-Learn

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

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

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

Free-Learn

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

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

Free-Learn

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