วิธี html
วิธี html ช่วยให้สามารถเปลี่ยนแปลงข้อความ
ขององค์ประกอบและรับข้อความพร้อมกับแท็ก
ไวยากรณ์
การรับข้อความ:
$(ตัวเลือก).html();
การเปลี่ยนแปลงข้อความ:
$(ตัวเลือก).html(ข้อความใหม่);
ข้อมูลเพิ่มเติม
วิธี html สามารถใช้ฟังก์ชันที่กำหนดไว้
กับแต่ละองค์ประกอบในชุดได้
โดยพารามิเตอร์แรกฟังก์ชันจะได้รับ
หมายเลขขององค์ประกอบในชุด และพารามิเตอร์ที่สอง
- ข้อความปัจจุบันขององค์ประกอบ:
$(ตัวเลือก).html(function(หมายเลขในชุด, ข้อความปัจจุบันขององค์ประกอบ));
ชื่อตัวแปรในฟังก์ชันสามารถตั้งชื่ออะไรก็ได้
ตัวอย่างเช่น ถ้าพารามิเตอร์แรกเราตั้งชื่อว่า
index - ในฟังก์ชันของเราจะสามารถเข้าถึง
ตัวแปร index ได้ ซึ่งจะเก็บหมายเลขใน
ชุดสำหรับองค์ประกอบที่ฟังก์ชันกำลังประมวลผล
อยู่ในเวลานั้น ในทำนองเดียวกัน ถ้าพารามิเตอร์ที่สอง
ตั้งชื่อว่า ตัวอย่างเช่น value - ใน
ฟังก์ชันของเราจะสามารถเข้าถึงตัวแปร value ได้
ซึ่งจะเก็บข้อความขององค์ประกอบที่ฟังก์ชัน
กำลังประมวลผลอยู่ในเวลานั้น:
$(ตัวเลือก).html(function(index, value) {
// ที่นี่สามารถเข้าถึงตัวแปร index และ value
});
ข้อความของแต่ละองค์ประกอบจะเปลี่ยนเป็น ข้อความที่ฟังก์ชันส่งคืนสำหรับองค์ประกอบนั้นโดยเฉพาะ
ตัวอย่าง
ลองแสดงเนื้อหาของย่อหน้าของเราบนหน้าจอ:
<p id="test">ข้อความ</p>
let text = $('#test').html();
alert(text);
ตัวอย่าง
ลองเปลี่ยนเนื้อหาของย่อหน้าของเรา:
<p id="test">ข้อความ1</p>
$('#test').html('ข้อความ2');
โค้ด HTML จะกลายเป็นแบบนี้:
<p id="test">ข้อความ2</p>
ตัวอย่าง
ลองเปลี่ยนเนื้อหาของย่อหน้าของเรา เป็นข้อความที่มีแท็ก:
<p id="test">ข้อความ1</p>
$('#test').html('<span>ข้อความ2</span>');
โค้ด HTML จะกลายเป็นแบบนี้:
<p id="test"><span>ข้อความ2</span></p>
ตัวอย่าง
ลองเพิ่มลำดับที่ในชุดต่อท้ายให้กับแต่ละย่อหน้า:
<p>ข้อความ</p>
<p>ข้อความ</p>
<p>ข้อความ</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
โค้ด HTML จะกลายเป็นแบบนี้:
<p>ข้อความ 0</p>
<p>ข้อความ 1</p>
<p>ข้อความ 2</p>
