از این متد برای اضافه نمودن محتوا یا تگ جدید به انتهای تگ مورد نظر استفاده می شود

append()

$("مشخص کردن تگ مورد نظر با سلکتورها").append(موردی که می خواهیم اضافه شود) 

محتوایی را به انتهای تگ مورد نظر اضافه می کند

مثال:

$("p").append("Some appended text.");

به محتوای موجود در تگ های p عبارت درون پرانتز را اضافه می کند

 

کاربرد مثال بالا در یک برنامه کامل

1

*<!DOCTYPE html>

2

*<html>

3

*<head>

4

*<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

5

*</script>

6

*<script>

7

$(document).ready(function(){

8

  $("#btn1").click(function(){

9

    $("p").append(" <b>Appended text</b>.");

10

  });

11

 

12

  $("#btn2").click(function(){

13

    $("ol").append("<li>Appended item</li>");

14

  });

15

});

16

*</script>

17

*</head>

18

 

19

*<body>

20

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

21

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

22

*<ol>

23

*<li>List item 1</li>

24

*<li>List item 2</li>

25

*<li>List item 3</li>

26

*</ol>

27

*<button id="btn1">Append text</button>

28

*<button id="btn2">Append list items</button>

29

*</body>

30

*</html>

توضیحات :

خط 7 :

زمانی که صفحه وب آماده نمایش می شود یعنی رویداد ready رخ می دهد تابع اجرا شود

خط 8 :

زمانی که روی دکمه btn1 کلیک شد تابع اجرا شود

خط 9 :

عبارت داخل پرانتز append که خود یک دستور html است به انتهای محتوای تگ های p  اضافه شود

خط 12 :

با کلیک روی دکمه به نام btn2 دستورات تابع اجرا شود

خط 13 :

عبارت داخل متد append که خود یک دستور html است و درواقع تعریف یک گزینه جدید برای لیست است به انتهای لیست اضافه شود

 

مشاهدو اجرای برنامه کامل