اضافه کردن محتوی در 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
}

خودتان امتحان کنید »

: نوشته شده توسط امیر پهلوان صادق; بازدید: 20062

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

دیدگاه‌ها

# مهدی امینیان

سلام
چرا برای تغییر عناصر html از جاوا اسکریبت استفاده میکنیم؟

# احسان عباسی

سلام. html مثل پیچ و مهره هست که برای بستن یا باز کردن اون باید از یک آچار به نام جاوااسکریپت استفاده کنیم. html و تمام تگ های اون مثل مصالح ساختمانی هستند و جاوا اسکریپت و جی کوئری نقش یک استاد بنّا رو بازی می کنه و اونها رو به همدیگه ربط می دهد. امیدوارم مفهوم رو رسونده باشم.

# مهدی عابدی مهر

سلام اضافه کردن چند عنصر جدید با متدهای ()after و ()before رو اصلا متوجه نشدم توضیح بدین واقعا دارم گیج میشم هر چی میرم جلو احساس می کنم مطالب برام گنگه

+4 # er7an

با سلام
در مثال اول، اگر بخواهیم با زدن دکمه فقط یک بار محتوا اضافه شود، باید چه کار کنیم؟
beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_prepend

+5 # امیر پهلوان صادق

سلام، می توانید از متد ()one استفاده کنید که باعث می شود فقط یکبار دکمه عمل کند:
$("#btn1").one( 'click', function () {
$("p").append(' Prepended text.');
});

# amir mohammad

عالی بود.

# vahid123456

با سلام و تشکر بابت مطالب مفیدتون
من میخوام با کد زیر که در jquery نوشتم یک عنصر div بهش اضافه کنم ولی به جای یک عنصر دو عنصر اضافه میشه.
$(".field-name-field-short-description").before("Abstract");

یعنی دو بار پشت سر هم مینویسه Abstract
لطفا بفرمایید چرا دو عنصر اضافه میشه؟؟؟ و راه حلش چیه؟؟؟ تشکر

# مهرداد صلاحی

با سلام و تشکر.
والا کد و منظورتون واضح نبود. من یه کد سمپل نوشتم، زمانی که شما روی نوشته کلیک کنید، یه عنصر به بعد اون اضافه میشه.
کد خوانا هست و با کمی دقت متوجه میشید چطوری کار میکنه.

<!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>

# vahid123456

سلام و تشکر از پاسختون

# raghb

با عرض سلام سوالی در مورد جی کوئری داشتم لطفا کمک کنید خیلی در گیرش شدم
.میخواستم به عناصری توسط جی کوئری ایجاد شده appendدسترسی داشته باشه یا اونا رو فراخوانی کنه تا بتونم روی آنها تغییرات بدم ولی هر کاری کردم نتونستم به دایو خلق شده جدید کامل دسترسی پیدا کنم برای مثلا ایجاد کلاس روی عنصر جدید؟
ممنون میشم زود پاسخ بدید

# مهرداد صلاحی

با سلام و تشکر
زمانی که شما در 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>

به کدها دقت کنید. تابع مربوط به هر المان در حین ساخت المان، ایجاد میشه.