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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

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

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

โพสต์โดย abdkode » 03/04/2019 3:56 pm

เมธอด 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) เปิดดู 419 ครั้ง

เมื่อเรากดปุ่มคลิก จะผลลัพธ์ดังนี้
prepend2.jpg
prepend2.jpg (10.21 KiB) เปิดดู 419 ครั้ง

จากโค้ด เรากำหนดข้อความที่ต้องการแทรกคือ "Welcome to " เมื่อมีกดปุ่มเพื่อให้เมธอดนี้ทำงาน ข้อความดังกล่าวก็จะไปแทรกด้านหน้า selector = <p> ซึ่งเป็นข้อความ "Mindphp!" จึงกลายเป็นข้อความ "Welcome to Mindphp!" ดังผลลัพธ์ที่เห็น

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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน