تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


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

با جی‌کوئری براحتی می‌توانید به یک صفحه 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 ، محتویات به بعد از المنت مورد نظر اضافه می‌شود.


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, فیسبوک, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین