با jQuery به راحتی می توانید یک عنصر جدید را به صفحه اضافه نمایید.
اضافه کردن محتوای
ما در اینجا به چهار متد که در jQuery برای اضافه کردن محتوای جدید استفاده می شود، اشاره خواهیم کرد:
- ()append - اضافه کردن محتوی به انتهای عنصر/عناصر انتخاب شده
- ()prepend - اضافه کردن محتوی به ابتدای عنصر/عناصر انتخاب شده
- ()after - اضافه کردن محتوی بعد از عنصر/عناصر انتخاب شده
- ()before - اضافه کردن محتوی قبل از عنصر/عناصر انتخاب شده
متد ()append در jQuery
متد ()append، برای اضافه کردن محتوی به انتهای عنصر/عناصر انتخاب شده استفاده می شود.
متد ()prepend در jQuery
متد ()prepend، برای اضافه کردن محتوی به ابتدای عنصر/عناصر انتخاب شده استفاده می شود.
اضافه کردن چند عنصر جدید با متدهای ()append و ()prepend
در هر دو مثال بالا، به انتها یا ابتدای عناصر انتخاب شده، تنها یک مقدار اضافه شد.
اما تعداد پارامترهای ورودی، در هر دو متد ()append و ()prepend می تواند نامحدود باشد. عنصر جدید را می توان مانند یک متن HTML جدید به متدهای ()append و ()prepend معرفی کرد (مانند آنچه در مثال های بالا انجام دادیم)، اما با jQuery و JavaScript نیز می توان عنصر جدید را ایجاد و معرفی کرد.
در مثال زیر، به سه روش مختلف، سه عنصر <p> ایجاد کرده ایم و سپس با استفاده از متد ()append آنها را به انتهای عنصر <body> اضافه کرده ایم:
مثال (اضافه کردن محتوی در jQuery)
{
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").before("Some text before");
اضافه کردن چند عنصر جدید با متدهای ()after و ()before
تعداد پارامترهای ورودی، در هر دو متد ()after و ()before نیز می تواند نامحدود باشد.
در مثال زیر، به سه روش مختلف، سه عنصر جدید ایجاد کرده ایم و سپس با استفاده از متد ()after آنها را بعد از عنصر <img> اضافه کرده ایم:
مثال (اضافه کردن محتوی در jQuery)
{
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
}
چرا برای تغییر عناصر html از جاوا اسکریبت استفاده میکنیم؟
در مثال اول، اگر بخواهیم با زدن دکمه فقط یک بار محتوا اضافه شود، باید چه کار کنیم؟
beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_html_prepend
$("#btn1").one('click', function () {
$("p").append('Prepended text.');
});
من میخوام با کد زیر که در 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="test">This is a test.</div>
<script>
$(document).ready(function(){
$('.test').click(function(){
$('body').find(".element").remove();
$(this).after('<div class="element">Element 2</div>');
});
});
</script>
</body>
</html>
.میخواستم به عناصری توسط جی کوئری ایجاد شده 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">This is a test.</div>
<script>
$(document).ready(function(){
$('.TS').click(function(){
var count = $('body').find('.element');
var div = $('<div>').addClass('element').html('Element '+count.length.toString()).click(function(){alert($(this).html());});
$(this).after(div);
});
});
</script>
</body>
</html>
به کدها دقت کنید. تابع مربوط به هر المان در حین ساخت المان، ایجاد میشه.