سبد (0)

تبلیغات

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

با jQuery به راحتی می توانید یک عنصر جدید را به صفحه اضافه نمایید.


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

ما در اینجا به چهار متد که در jQuery برای اضافه کردن محتوای جدید استفاده می شود، اشاره خواهیم کرد:

  • ()append - اضافه کردن محتوی به انتهای عنصر/عناصر انتخاب شده
  • ()prepend - اضافه کردن محتوی به ابتدای عنصر/عناصر انتخاب شده
  • ()after -  اضافه کردن محتوی بعد از عنصر/عناصر انتخاب شده
  • ()before -  اضافه کردن محتوی قبل از عنصر/عناصر انتخاب شده

متد ()append در jQuery

متد ()append، برای اضافه کردن محتوی به انتهای عنصر/عناصر انتخاب شده استفاده می شود.

مثال (اضافه کردن محتوی در jQuery)

$("p").append("Some appended text.");
خودتان امتحان کنید »

متد ()prepend در jQuery

متد ()prepend، برای اضافه کردن محتوی به ابتدای عنصر/عناصر انتخاب شده استفاده می شود.

مثال (اضافه کردن محتوی در jQuery)

$("p").prepend("Some prepended text.");
خودتان امتحان کنید »

اضافه کردن چند عنصر جدید با متدهای ()append و ()prepend

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

اما تعداد پارامترهای ورودی، در هر دو متد ()append و ()prepend می تواند نامحدود باشد. عنصر جدید را می توان مانند یک متن HTML جدید به متدهای ()append و ()prepend معرفی کرد (مانند آنچه در مثال های بالا انجام دادیم)، اما با jQuery و JavaScript نیز می توان عنصر جدید را ایجاد و معرفی کرد.

در مثال زیر، به سه روش مختلف، سه عنصر <p> ایجاد کرده ایم و سپس با استفاده از متد ()append آنها را به انتهای عنصر <body> اضافه کرده ایم:

مثال (اضافه کردن محتوی در jQuery)

function appendText()
{
var txt1="<p>Text.</p>";               // Create element with HTML 
var txt2=$("<p></p>").text("Text.");   // Create with jQuery
var txt3=document.createElement("p");  // Create with DOM
txt3.innerHTML="Text.";
$("body").append(txt1,txt2,txt3);         // Append the new elements
}
خودتان امتحان کنید »

متدهای ()after و ()before در jQuery

متد ()after، برای اضافه کردن محتوی بعد از عنصر/عناصر انتخاب شده استفاده می شود.

متد ()before، برای اضافه کردن محتوی قبل از عنصر/عناصر انتخاب شده استفاده می شود.

مثال (اضافه کردن محتوی در jQuery)

$("img").after("Some text after");

$("img").before("Some text before");
خودتان امتحان کنید »

اضافه کردن چند عنصر جدید با متدهای ()after و ()before

تعداد پارامترهای ورودی، در هر دو متد ()after و ()before نیز می تواند نامحدود باشد.

در مثال زیر، به سه روش مختلف، سه عنصر جدید ایجاد کرده ایم و سپس با استفاده از متد ()after آنها را بعد از عنصر <img> اضافه کرده ایم:

مثال (اضافه کردن محتوی در jQuery)

function afterText()
{
var txt1="<b>I </b>";                    // Create element with HTML 
var txt2=$("<i></i>").text("love ");     // Create with jQuery
var txt3=document.createElement("big");  // Create with DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Insert new elements after img
}
خودتان امتحان کنید »

jQuery HTML Reference

For a complete overview of all jQuery HTML methods, please go to our jQuery HTML/CSS Reference.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان