คำสั่งนี้จะำทำงานตรงกันข้ามกับคำสั่ง before()

after(content)

content : (string|selector)

คำสั่งนี้จะทำหน้าที่เพิ่ม content เข้าไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งเป็น สองกรณี คือ ถ้าส่ง string เข้าไปในฟังก์ชั่น จะเป็นการนำ string นั้นไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น กรณีที่ 2 ถ้าส่ง selector เข้าไปในฟังก์ชั่น จะเป็นการย้าย selector ตัวนั้นไปต่อท้าย selector ที่เรียกใช้ฟังก์ชั่น

ตัวอย่างการใช้งาน

Live Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jquery after command</title>
<script type="text/javascript">
$(document).ready(function(){
 
	$('#after_selector').click(function(){
 
		$('h1').after( $('h2') );
 
	});
 
 
	$('#after_string').click(function(){
 
		$('h1').after( 'ข้อความที่เพิ่มเข้าไปใหม่' );
 
	});
 
})
</script>
</head>
<body>
<h2 class="head">| เนื้อหาของ h2 |</h2>
<p>
  <input type="submit" name="after_selector" id="after_selector" value="After (selector)" />
  <input type="submit" name="after_string" id="after_string" value="After (string)" />
</p>
<h1>| เนื้อหาของ h1 |</h1>
</body>
</html>

ในตัวอย่างผมแสดงให้เห็น การส่งพารามิเตอร์เข้าไปในฟังก์ชั่น ทั้งกรณีที่เป็น string และกรณีที่เป็น selector