ทำงานเหมือนกันเป๊ะๆ กับคำสั่ง after() เพราะฉะนั้น ผมจะขอยกให้ดูเฉพาะตัวอย่างการใช้งาน ส่วนคำอธิบายรายละเอียด ให้อ่านจาก after()

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

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 insertAfter command</title>
<script type="text/javascript">
$(document).ready(function(){
 
	$('input[name=set]').click(function(){
 
		$('h2').insertAfter( $('h1') );
 
	});
 
})
</script>
</head>
<body>
<p>
  <input type="submit" name="set" id="set" value="Insert After" />
</p>
<h2 class="head">| เนื้อหาของ h2 |</h2>
<h1>| เนื้อหาของ h1 |</h1>
</body>
</html>

คล้ายๆกับตัวอย่างของคำสั่ง ในบทความก่อนหน้าที่ผมเขียนมา แ่ต่ท่านเห็นนี่หรือเปล่า

$('input[name=set]').click

มีความหมายว่า เมื่อแท็ก input ที่มีชื่อว่า set โดนคลิก ซึ่งก็หมายถึงปุ่ม นั่นเอง selector ของ jquery เป็นแก่นหลักที่ท่านจะต้องทำความเข้าใจให้ลึกซึ้ง ถ้าท่านเข้าใจเรื่อง selector อย่่างชัดเจน ท่านจะมองเห็นสวรรค์รำไร เลยทีเดียว

jQuery jQuery tutorial Live Demo
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ