آموزش بخش Add (افزودن عناصر) در JQuery

بهاره حسنیبهاره حسنی
109 بازدید
jquery
[cdb_box_content]

با سلام خدمت همراهان گرامی وب سایت پرنیان طرح

با یکی دیگر از مقالات آموزشی جی کوئری در خدمت شما هستیم.

میتوانید برای مطالعه مقالات دیگر جی کوئری به این لینک مراجعه کنید.

در آموزش امروز قصد داریم در مورد jQuery Add در کتابخانه جی کوئری صحبت کنیم.

در ادامه ی این مطلب همراه ما باشید.

[/cdb_box_content]
[cdb_box_content]

مقدمه


با استفاده از jQuery add افزودن عناصر یا مطالب جدید آسان است.

ما به ۴ روش jQuery که برای افزودن محتوای جدید استفاده میشود خواهیم پرداخت :

append : در انتهای عناصر انتخاب شده محتوا را وارد میکند.

prepend : در ابتدای عناصر انتخاب شده محتوا را وارد میکند.

after : بعد از عناصر انتخاب شده محتوا را وارد میکند.

before : محتوا را قبل از عناصر انتخاب شده درج میکند.

[/cdb_box_content]
[cdb_box_content]

متد ()append :

در انتهای عناصر HTML انتخاب شده ، محتوا را وارد میکند.

مثال :

[php]

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#btn1”).click(function(){
$(“p”).append(” <b>Appended text</b>.”);
});

$(“#btn2”).click(function(){
$(“ol”).append(“<li>Appended item</li>”);
});
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

<button id=”btn1″>Append text</button>
<button id=”btn2″>Append list items</button>

</body>

[/php]

میتوانید خروجی مثال را در این لینک ببینید.

[/cdb_box_content]
[cdb_box_content]

متد ()prepend :

در ابتدای عناصر انتخاب شده محتوا را وارد میکند.

مثال :

[php]

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#btn1”).click(function(){
$(“p”).prepend(“<b>Prepended text</b>. “);
});
$(“#btn2”).click(function(){
$(“ol”).prepend(“<li>Prepended item</li>”);
});
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

<button id=”btn1″>Prepend text</button>
<button id=”btn2″>Prepend list item</button>

</body>

[/php]

میتوانید خروجی این مثال را در این لینک ببینید.

[/cdb_box_content]
[cdb_box_content]

متد ()after و ()before :

متد ()after بعد از عناصر انتخاب شده محتوا را وارد میکند و متد ()before محتوا را قبل از عناصر انتخاب شده درج میکند.

مثال :

[php]

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“#btn1”).click(function(){
$(“img”).before(“<b>Before</b>”);
});

$(“#btn2”).click(function(){
$(“img”).after(“<i>After</i>”);
});
});
</script>
</head>
<body>

<img src=”/images/w3jquery.gif” alt=”jQuery” width=”100″ height=”140″><br><br>

<button id=”btn1″>Insert before</button>
<button id=”btn2″>Insert after</button>

</body>

[/php]

میتوانید خروجی این مثال را در این لینک ببینید.

[/cdb_box_content]
دسته بندی JQuery
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

30+ محصولات
234+ سفارشات تکمیل شده
1701+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت