اضافه کردن محتوا در jQuery

  • آپدیت شده در تاریخ

اضافه کردن محتوا در jQuery با استفاده از متد append و appendTo در جی کوئری انجام می شود .

در هنگام ساخت اپلیکیشن های تحت وب , اضافه کردن محتوا به یک تگ از HTML در حین اجرای رویداد خاص , از عملیات بسیار جالب است . در HTML می توانیم هر نوع محتوایی را با استفاده از append در jQuery اضافه کنیم .

محتوای اضافه شده به معنای واقعی کلمه اضافه می شود . به این معنا که محتوای از قبل وجود داشته در ادامه محتوای جدید قرار خواهد گرفت .

اضافه کردن محتوا در jQuery

توابع اضافه کردن محتوا در jQuery

  • Append()
  • appendTo()

این دو تابع در نتیجه یکسان هستند اما سینکتکس متفاوتی دارند . از لحاظ سرعت اجرا هم  تفاوت زیادی ندارند .

نحوه استفاده از append و appendto :

متد append در jQuery

targetContainer.append(newContent)

این تایع یک پارامتر که محتوا است را دریافت می کند . در هنگام اجرای این تابع بر روی یک سلکتور CSS , به دنبال آن تگ در HTML می کند . اگر موردی یافت شد , محتوا به عنوان آخرین فرزند (child) از آن تگ اضافه می شود .

برای مثال :

خروجی :

متد appendTo در jQuery

newContent.appendTo(targetContainer);

  • targetContainer – در کدامیک از تگ های HTML محتوای جدید اضافه شود.
  • newContent – محتوایی که قرار است اضافه شود . می توانیم یک سلکتور CSS یا یک محتوای  HTML قرار بدیم.

با استفاده از تابع appendTo() در جی کوئری , می توانیم المنت موجود را به یک تگ دیگر منتقل بدیم و همچنین می توانیم یک محتوای جدید برای اضافه شدن به تگ مورد نظر اضافه کنیم.

برای مثال :

 

اول تگ پاراگراف موجود , به تگ div منتقل و به عنوان آخرین عضو اضافه شده است . و سپس یک تگ پاراگراف جدید ساخته و به محتوای قبلی اضافه کردیم .

خروجی بعد از اولین appendTo :

خروجی بعد از دومین appendTo :

امیدوارم از آموزش اضافه کردن محتوا در jQuery استفاده مفید را برده باشید.

 

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۲)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. مریم ۱۱ اردیبهشت ۱۳۹۹

    سلام برای اینکه داخل textbox با هر زبانی کاربر تایپ کرد اونو تبدیل به زبان فارسی کنه با استفاده از jquery و javascript چطور باید عمل کنیم

    پاسخ
    1. حسن شفیعی ۱۲ اردیبهشت ۱۳۹۹

      سلام. الگوریتم اول (کار زمانبری هست ولی به سادگی قابل انجامه) به اینصورت هست که شما آرایه هایی با کلید/مقدار می سازید که کلید همان کاراکتر زبانی هست که کابر وارد می کند و مقدار هم همان حرف فارسی را جایگزین کند که این کار با رویداد keyup باید هر بار بررسی و حایگزین شود.
      مورد دوم استفاده از api یا ajax برای ترجمه کامل آن متن یا کلمه هست به اینصورت که کاربر اگر یه کلمه وارد کرد و بعد مثلا شما چک می کنید با هر بار زدن space یک درخواست به آن آدرس می فرستید و کلمه را درآن api یا برنامه مثلا php خود ترجمه می کنید و بعد برگشت میدید و مقدار textbox را تغییر میدید.
      موفق باشید.

      پاسخ
دوره های آموزشی