คำสั่ง before นี้จะมีความคล้ายคลึงกับคำสั่ง prepend ท่านต้องแยกให้ดีนะครับ prepend นั้นจะเพิ่มเนื้อหาเข้าไปในส่วนต้นของเนื้อหาเดิม คือจะเพิ่มเนื้อหาเข้าไปข้างใน ส่วน before นั้น จะเพิ่มเนื้อหาเข้าไปข้างหน้าอีลิเม้นท์

ดู Live Demo ดีกว่าครับ ดีว่าอธิบาย 1000 คำ

before(content)

content : (string|selector) พารามิเตอร์จะเป็น string (ปน html) ก็ได้ จะเป็น selector ก็ได้

คำสั่งนี้ ถ้าส่ง string เข้าไปในฟังก์ชั่น มันก็จะเอา string ไปวางไว้หน้า selector ที่เรียกใช้ ถ้าส่ง 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 before command</title>
<script type="text/javascript">
$(document).ready(function(){
 
	$('#before').click(function(){
 
		$('.head').before( '<i>on the fly</i>' )
 
	});
 
	$('#prepend').click(function(){
 
		$('.head').prepend( '<i>on the fly</i>' )
 
	});
 
})
</script>
</head>
<body>
<h2 class="head">| เนื้อหาของ h2 |</h2>
<p>
  <input type="submit" name="before" id="before" value="Before" />
  <input type="submit" name="prepend" id="prepend" value="Prepend" />
</p>
</body>
</html>

ในตัวอย่าง นอกจากจะแสดงการใช้งานคำสั่ง before ผมยังแสดงให้เห็นความแตกต่าง ระหว่างคำสั่ง before และ prepend ด้วย

$('#before')
$('.head')

ถ้าท่านสงสัย สองตัวด้านบน ทำไมตัวหนึ่งมี # อีกตัวจึงเป็น . โปรดอ่านบทความนี้ครับ selector ของ jQuery ผมอธิบายไว้ละเอียดแล้ว