اضافه کردن محتوا در jQuery با استفاده از متد append و appendTo در جی کوئری انجام می شود .
در هنگام ساخت اپلیکیشن های تحت وب , اضافه کردن محتوا به یک تگ از HTML در حین اجرای رویداد خاص , از عملیات بسیار جالب است . در HTML می توانیم هر نوع محتوایی را با استفاده از append در jQuery اضافه کنیم .
محتوای اضافه شده به معنای واقعی کلمه اضافه می شود . به این معنا که محتوای از قبل وجود داشته در ادامه محتوای جدید قرار خواهد گرفت .
توابع اضافه کردن محتوا در jQuery
- Append()
- appendTo()
این دو تابع در نتیجه یکسان هستند اما سینکتکس متفاوتی دارند . از لحاظ سرعت اجرا هم تفاوت زیادی ندارند .
نحوه استفاده از append و appendto :
|
1 |
targetContainer.append(newContent) |
|
1 |
newContent.appendTo(targetContainer) |
متد append در jQuery
targetContainer.append(newContent)
این تایع یک پارامتر که محتوا است را دریافت می کند . در هنگام اجرای این تابع بر روی یک سلکتور CSS , به دنبال آن تگ در HTML می کند . اگر موردی یافت شد , محتوا به عنوان آخرین فرزند (child) از آن تگ اضافه می شود .
برای مثال :
|
1 2 3 4 5 6 7 |
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script language="javascript"> $( document ).ready(function() { $(".message").append("Added using jQuery append()"); }); </script> <div class="message">Message: </div> |
خروجی :
|
1 |
<div class="message">Message: Added using jQuery append()</div> |
متد appendTo در jQuery
newContent.appendTo(targetContainer);
targetContainer– در کدامیک از تگ های HTML محتوای جدید اضافه شود.newContent– محتوایی که قرار است اضافه شود . می توانیم یک سلکتور CSS یا یک محتوای HTML قرار بدیم.
با استفاده از تابع appendTo() در جی کوئری , می توانیم المنت موجود را به یک تگ دیگر منتقل بدیم و همچنین می توانیم یک محتوای جدید برای اضافه شدن به تگ مورد نظر اضافه کنیم.
برای مثال :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script language="javascript"> $(document).ready(function() { //example-1 moving the first occurring paragraph to the class message $("p").appendTo($(".message")); //example-2 append the given html content to class message $("<p>new content appended</p>").appendTo($(".message")); }); </script> <p>moved paragraph tag appended with target div</p> <div class="message">Message: </div> |
اول تگ پاراگراف موجود , به تگ div منتقل و به عنوان آخرین عضو اضافه شده است . و سپس یک تگ پاراگراف جدید ساخته و به محتوای قبلی اضافه کردیم .
خروجی بعد از اولین appendTo :
|
1 |
<div class="message">Message: <p>moved paragraph tag appended with target div</p></div> |
خروجی بعد از دومین appendTo :
|
1 |
<div class="message">Message: <p>moved paragraph tag appended with target div</p><p>new content appended</p></div> |
امیدوارم از آموزش اضافه کردن محتوا در jQuery استفاده مفید را برده باشید.
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
سلام برای اینکه داخل textbox با هر زبانی کاربر تایپ کرد اونو تبدیل به زبان فارسی کنه با استفاده از jquery و javascript چطور باید عمل کنیم
سلام. الگوریتم اول (کار زمانبری هست ولی به سادگی قابل انجامه) به اینصورت هست که شما آرایه هایی با کلید/مقدار می سازید که کلید همان کاراکتر زبانی هست که کابر وارد می کند و مقدار هم همان حرف فارسی را جایگزین کند که این کار با رویداد keyup باید هر بار بررسی و حایگزین شود.
مورد دوم استفاده از api یا ajax برای ترجمه کامل آن متن یا کلمه هست به اینصورت که کاربر اگر یه کلمه وارد کرد و بعد مثلا شما چک می کنید با هر بار زدن space یک درخواست به آن آدرس می فرستید و کلمه را درآن api یا برنامه مثلا php خود ترجمه می کنید و بعد برگشت میدید و مقدار textbox را تغییر میدید.
موفق باشید.