การใช้ .text() .html() และ .val() เพื่อเปลี่ยนข้อความ เมื่อกดปุ่ม

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การใช้ .text() .html() และ .val() เพื่อเปลี่ยนข้อความ เมื่อกดปุ่ม

การใช้ .text() .html() และ .val() เพื่อเปลี่ยนข้อความ เมื่อกดปุ่ม

โดย bankjittapol » 15/11/2019 2:17 pm

การใช้ .text() .html() และ .val() เพื่อเปลี่ยนข้อความ เมื่อกดปุ่ม
.text() .html() และ .val() อยู่หมวดของ jQuery - Set Content ซึ่งมีสามารถที่แตกต่างกัน
.text() เป็นการกำหนด หรือ รีเทิร์นค่า ชนิดข้อมูลเป็น text ตาม elements ที่ทำการเลือก
.html() เป็นการกำหนด หรือ รีเทิร์นค่า ชนิดข้อมูลเป็น tag html ตาม elements ที่ทำการเลือก
.val() เป็นการกำหนด หรือ รีเทิร์นค่า จากฟิวล์

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

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

<p class="settext"><button class="btn">Set .text()</button>
<p id="settext">ข้อความก่อน Set .text()</p></p>

<p class="sethtml"><button class="btn">Set .html()</button><p id="sethtml">ข้อความก่อน Set .html()</p></p>

<p class="setval"><button class="btn">Set .val()</button><input type="text" id="setval" value="ข้อความก่อน Set .val()"></p>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

<script>
$(document).ready(function(){
 
  
$('.settext .btn').click(function(){$("#settext").text("SET TEXT");});
    
$('.sethtml .btn').click(function(){$("#sethtml").html("<b>SET HTML</b>");});
    
$('.setval .btn').click(function(){$("#setval").val("SET VAL");});
     
});
</script>
ก่อนกดปุ่ม
รูปภาพ

เมื่อกดปุ่มแล้ว
รูปภาพ

จะเห็นได้ว่า ใน .html() มี tag <b> (ตัวหนาอยู่) และ .val() กำหนด value ใน input เท่านั้น

ข้างบน