คำสั่งนี้ทำงานเหมือนกับคำสั่ง before() เป๊ะๆ อาจจะเรียกได้ว่าเป็น alias ของกันและกัน เพราะงั้นการทำงานของคำสั่งนี้ ท่านไปอ่าน คำสั่ง before() ของ jquery นะครับ ในบทนี้ผมจะแสดง เฉพาะตัวอย่างการใช้งาน

ผมเคยมานั่งคิด ว่าทำไม เขาใช้ชื่อถึงสองชื่อ ในบางฟังก์ชั่นที่ทำงานเหมือนกันเป๊ะๆ ถ้า php ก็ die กับ exit การทำงานเหมือนกันทุกประการ เป็น alias ของกันและกัน ผมว่าดีไม่ดีเนื้อภายในฟังก์ชั่นคงเป็นตัวเดียวกัน

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

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

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

สองคำสั่งนี้ ความหมายเหมือนกัน คือ ให้นำ h1 ไปไว้หน้า h2

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

jQuery jQuery tutorial Live Demo
Avatar

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

Programmer, Blogger

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