سبد (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.

دیدگاه‌ها  

0 # مهدی عابدی مهر 1397-03-29 00:55
سلام اضافه کردن چند عنصر جدید با متدهای ()after و ()before رو اصلا متوجه نشدم توضیح بدین واقعا دارم گیج میشم هر چی میرم جلو احساس می کنم مطالب برام گنگه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # er7an 1396-05-25 15:27
با سلام
در مثال اول، اگر بخواهیم با زدن دکمه فقط یک بار محتوا اضافه شود، باید چه کار کنیم؟
http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_prepend
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-05-26 08:16
سلام، می توانید از متد ()one استفاده کنید که باعث می شود فقط یکبار دکمه عمل کند:
$("#btn1").one( 'click', function () {
$("p").append(' Prepended text.');
});
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # amir mohammad 1395-12-21 12:56
عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # vahid123456 1395-07-14 01:15
با سلام و تشکر بابت مطالب مفیدتون
من میخوام با کد زیر که در jquery نوشتم یک عنصر div بهش اضافه کنم ولی به جای یک عنصر دو عنصر اضافه میشه.
$(".field-name-field-short-description").before("Abstract");

یعنی دو بار پشت سر هم مینویسه Abstract
لطفا بفرمایید چرا دو عنصر اضافه میشه؟؟؟ و راه حلش چیه؟؟؟ تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-07-14 07:38
با سلام و تشکر.
والا کد و منظورتون واضح نبود. من یه کد سمپل نوشتم، زمانی که شما روی نوشته کلیک کنید، یه عنصر به بعد اون اضافه میشه.
کد خوانا هست و با کمی دقت متوجه میشید چطوری کار میکنه.

<!DOCTYPE html>
<html>
<head>
<title>CODE</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="tes t">This is a test.</div>
<script>
$(document).ready(function(){
$('.test').click(function(){
$('body').find(".element").remove();
$(this).after('<div class="ele ment">E lement 2</div>');
});
});
</script>
</body>
</html>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # vahid123456 1395-07-14 14:08
سلام و تشکر از پاسختون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # raghb 1394-02-26 19:57
با عرض سلام سوالی در مورد جی کوئری داشتم لطفا کمک کنید خیلی در گیرش شدم
.میخواستم به عناصری توسط جی کوئری ایجاد شده appendدسترسی داشته باشه یا اونا رو فراخوانی کنه تا بتونم روی آنها تغییرات بدم ولی هر کاری کردم نتونستم به دایو خلق شده جدید کامل دسترسی پیدا کنم برای مثلا ایجاد کلاس روی عنصر جدید؟
ممنون میشم زود پاسخ بدید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-07-14 07:55
با سلام و تشکر
زمانی که شما در jQuery عنصری جدیدی خلق میکنید، بهتره موارد مربوط به اون رو در همون قسمت ایجاد کنید.
کد زیر رو کامل در یک فایل html کپی و اجرا کنید. با کلیک روی div اول، المانی در بعد از محل div اول درج میشه. با کلیک روی هر المان تابعی مربوط به همان عنصر اجرا میشه.


<!DOCTYPE html>
<html>
<head>
<title>CODE</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="TS& quot;>This is a test.</div>
<script>
$(document).ready(function(){
$('.TS').click(function(){
var count = $('body').find('.element');
var div = $('<div>' ).addClass('ele ment').html('El ement '+count.length.toString()).click(function(){alert($(this).html());});
$(this).after(div);
});
});
</script>
</body>
</html>


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