JQuery Tips : เมธอด prepend() ใช้เพื่อแทรกเนื้อหาไปที่จุดเริ่มต้นของอิลีเมนต์

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

JQuery Tips : เมธอด prepend() ใช้เพื่อแทรกเนื้อหาไปที่จุดเริ่มต้นของอิลีเมนต์

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

เมธอด prepend () เป็นเมธอด inbuilt ใน jQuery ซึ่งใช้เพื่อแทรกเนื้อหาที่กำหนดไปที่จุดเริ่มต้นขององค์ประกอบหรืออิลีเมนต์ที่เลือก
รูปแบบ syntax ดังนี้

โค้ด: เลือกทั้งหมด

$(selector).prepend(content, function)
พารามิเตอร์:เมธอดรับสองพารามิเตอร์ตามด้านล่างนี้:
content : เป็นพารามิเตอร์ที่จำเป็นซึ่งจะใช้ในการระบุเนื้อหาที่จะต้องการแทรก
function : มันเป็นพารามิเตอร์ตัวเลือกเพิ่มเติม(ไม่จำเป็น)ที่ใช้ในการระบุฟังก์ชั่นที่จะดำเนินการหลังจากเรียกใช้

การคืนค่า (Return Value) : วิธีนี้ส่งคืนelementที่เลือกพร้อมการเปลี่ยนแปลงที่กำหนดโดยวิธี prepend ()

ตัวอย่างโค้ดด้านล่างเป็นวิธีการ prepend () ใน jQuery:

โค้ด: เลือกทั้งหมด

<!DOCTYPE html> 
<html> 
<head> 
	<title>The prepend Method</title> 
	<script src=" 
	https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
	</script> 
		
	<!-- jQuery code to show the woirking of this method -->
	<script> 
		$(document).ready(function(){ 
			$("button").click(function(){ 
				$("p").prepend("Welcome to "); 
			}); 
		}); 
	</script> 
	<style> 
		div { 
			width: 350px; 
			height: 100px; 
			font-weight: bold; 
			padding:20px; 
			font-size: 25px; 
			border: 2px solid navy; 
		} 
	</style> 
</head> 
<body> 
	<div> 
		<p>Mindphp!</p> 
		<!-- Click on this button to see the change -->
		<button>Click Here!</button> 
	</div> 
</body> 
</html> 
ผลลัพธ์ที่ได้เมื่อเปิดผ่านเบราเซอร์
prepend1.jpg
prepend1.jpg (7.94 KiB) Viewed 1230 times
เมื่อเรากดปุ่มคลิก จะผลลัพธ์ดังนี้
prepend2.jpg
prepend2.jpg (10.21 KiB) Viewed 1230 times
จากโค้ด เรากำหนดข้อความที่ต้องการแทรกคือ "Welcome to " เมื่อมีกดปุ่มเพื่อให้เมธอดนี้ทำงาน ข้อความดังกล่าวก็จะไปแทรกด้านหน้า selector = <p> ซึ่งเป็นข้อความ "Mindphp!" จึงกลายเป็นข้อความ "Welcome to Mindphp!" ดังผลลัพธ์ที่เห็น

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 66