آموزش jquery اضافه کردن المنت به صفحه HTML قسمت هفتم

این آموزش فوق العاده کاربرد داره تو jqurey با جی‌کوئری براحتی می‌توانید به یک صفحه HTML المنت های خود را اضافه کنید.

با 4 روش این کار را انجام می‌دهیم :

  • ()append : محتویات را به آخر المنت مورد نظر اضافه می‌کند.
  • ()prepend: محتویات را به اول المنت مورد نظر اضافه می‌کند.
  • ()after    : محتویات را به بعد از المنت مورد نظر اضافه می‌کند.
  • ()before  : محتویات را به قبل از المنت مورد نظر اضافه می‌کند.

 

()append :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.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>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>

با کلیک بر روی Button#btn1 محتوا به المنت p اضافه می‌شود.

با کلیک بر روی Button#btn2 محتوا به آخر list اضافه می‌شود.

 

* برای ()prepend ، جای append ، کلمه prepend را وارد کنید.

 

()after و ()before :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.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>
</html>

با کلیک بر روی Button#btn1 ، محتویات به قبل از المنت مورد نظر اضافه می‌شود.

با کلیک بر روی Button#btn2 ، محتویات به بعد از المنت مورد نظر اضافه می‌شود.

خوب حتما متوجه شدید که با این آموزش چه کارهایی میشه انجام داد و چقدر تو جی کوئری میشه پیشرفت کرد پس بقیه کار دیگه با خودتون

موفق و سربلند باشید با جی کوئری :)

نمونه ای از آخرین کارهای ما

آموزش jquery اضافه کردن المنت به صفحه HTML قسمت هفتمReviewed by Goolexacom on Mar 24Rating: 5.0آموزش jquery اضافه کردن المنت به صفحه HTMLآموزش jquery اضافه کردن المنت به صفحه HTML

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

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

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

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت