پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
با سلام خدمت همراهان گرامی وب سایت پرنیان طرح
با یکی دیگر از مقالات آموزشی جی کوئری در خدمت شما هستیم.
میتوانید برای مطالعه مقالات دیگر جی کوئری به این لینک مراجعه کنید.
در آموزش امروز قصد داریم در مورد jQuery Add در کتابخانه جی کوئری صحبت کنیم.
در ادامه ی این مطلب همراه ما باشید.
مقدمه
با استفاده از jQuery add افزودن عناصر یا مطالب جدید آسان است.
ما به ۴ روش jQuery که برای افزودن محتوای جدید استفاده میشود خواهیم پرداخت :
append : در انتهای عناصر انتخاب شده محتوا را وارد میکند.
prepend : در ابتدای عناصر انتخاب شده محتوا را وارد میکند.
after : بعد از عناصر انتخاب شده محتوا را وارد میکند.
before : محتوا را قبل از عناصر انتخاب شده درج میکند.
متد ()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]
میتوانید خروجی مثال را در این لینک ببینید.
متد ()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]
میتوانید خروجی این مثال را در این لینک ببینید.
متد ()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]
میتوانید خروجی این مثال را در این لینک ببینید.
