jQuery Add and Remove

1.jQuery Add

jQuery Add ใช้ในการเพิ่ม element สามารถทำงานโดยใช้ 4 method ดังนี้

  • append() เป็น method ที่ใช้ในการแทรก element หลังจากที่เลือก element เสร็จแล้ว
  • prepend() เป็น method ที่ใช้ในการแทรก element พร้อมหรือตั้งแต่เริ่มเลือก element
  • after() แทรก element ใหม่หลังจากหรือถัดไปจาก element ที่เลือก
  • before() แทรก element ใหม่ก่อนหน้า element ที่เลือก

 

ตัวอย่างที่ 1 การใช้งาน append()

<html>
 <head>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
   $(document).ready(function(){
    $("button").click(function(){
     $("p").append("<u>Hello World</u>");
    });
   });
  </script>
 </head>

 <body>
  <p>เพิ่ม element โดยใช้ฟังก์ชั่น append()</p>
  <button>เพิ่ม</button>
 </body>
</html>

ไฟล์ที่ 1 ตัวอย่าง append()

 

ตัวอย่างที่ 2 การใช้งาน prepend()

<html>
 <head>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
   $(document).ready(function(){
    $("button").click(function(){
     $("p").prepend("<u>Hello World</u>");
    });
   });
  </script>
 </head>

 <body>
  <p>เพิ่ม element โดยใช้ฟังก์ชั่น prepend()</p>
  <button>เพิ่ม</button>
 </body>
</html>

ไฟล์ที่ 2 ตัวอย่างการใช้งาน prepend()

 

ตัวอย่างที่ 3 before()

before() เป็นฟังก์ชันหรือแมธอดที่ใช้ในการแทรก element ลำดับก่อนหน้าของ  element ที่เลือกดังตัวอย่างต่อไปนี้

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>Before</b>");
  });
});
</script>
</head>
<body>

<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140"><br><br>

<button id="btn1">Insert before</button>

</body>
</html>

ไฟล์ที่ 3 before()

 

ตัวอย่างที่ 4 after()

after() เป็นฟังก์ชันหรือเมธอดที่มช้ในการแทรก element ลำดับหลังจาก element ที่เลือก ดังตัวอย่างต่อไปนี้

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){
    $("img").after("<i>After</i>");
  });
});
</script>
</head>
<body>

<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140"><br><br>

<button id="btn2">Insert after</button>

</body>
</html>

ไฟล์ที่ 4 after()

 

2.jQuery Remove

jQuery Remove เป็นการใช้งานเมธอดเพื่อลบล้าง element และเนื้อหาต่างๆ ซึ่งประกอบได้วยเมธอด 

  • remove() เป็นฟังก์ชั่นลบทุกอย่างของ element ที่เลือก 
  • empty() เป็นฟังก์ชันในการลบเนื้อหา หรือ element ภายในเท่านั้น

เปรียบเทียบความแตกต่างระหว่าง remove() กับ empty() 

ตารางเปรียบเทียบความแตกต่าง remove() กับ empty()
remove() empty()
  • ลบ element ทีเลือก
  • ลบข้อมูลที่อยู่ภายใน element ที่เลือก
  • ไม่ลบ element ที่เลือก
  • ลบเฉพาะข้อมูล หรือ element ที่อยู่ภายใน element ที่เลือก

ตัวอย่างที่ 1 remove()

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>

</div>
<br>

<button>Remove div element</button>

</body>
</html>

ไฟล์ที่ 5 remove()

 

ตัวอย่างที่ 2 empty()

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>

</div>
<br>

<button>Empty div element</button>

</body>
</html>

ไฟล์ที่ 6 empty()