จากบทความที่แล้วเรื่องการใช้งาน Method text() ทีนี้มาถึงหน้าที่ของ Method html() บ้างตามที่กล่าวไปคราวก่อน ซึ่งหน้าที่ของมันก็คือใช้ดึงค่า html content ในอิิลิเมนต์ภายในเซ็ตและใช้กำหนดค่า html content เข้าไปในอิลิเมนต์ภายในเซ็ตมาดูตัวอย่างแรกกันก่อน
ก่อนอื่นเรียวสร้างแท็กขึ้นมาก่อนเหมือนเดิม
<div id="idDiv1" class="cssDiv1">
ทดสอบการแสดงข้อความใน <b>div 1</b>
</div>
<div id="idDiv2" class="cssDiv2">ทดสอบการแสดงข้อความใน div 2</div>
จะสังเกตุว่าแต่ละอิลิเมนต์มีการกำหนด id และกำหนด class และ <div> แรกนั้นภายในมี html content ปนอยู่ด้วยทีนี้มาเขียน jQuery กัน
alert($("div").html());
ทีนี้ลองรันดูนะคะ
จะเห็นว่า Method html() นั้นจะคล้า่ย ๆ กับ Method text() แต่ html() จะทำการดึงแท็ก html ที่อยู่ในอิลิเมนต์ขึ้นมาด้วย (ดึง content ในอิลิเมนต์มาทั้งหมด) แต่ถ้าเป็น text() จะดึงแค่ string ออกมาโดยไม่สนใจแท็ก html และอีกอย่างที่แตกต่างก็คือเจ้าตัว html() นั้นหลังจากดึง content ขึ้นมาแล้วจะทำการ Break ทันทีแต่ text() นั้นจะทำการไปดึง content ต่อไปเรื่อย ๆ จนหมดเซ็ตทีเรากำหนด
จากผลการรันจะสังเกตุว่าแท็ก <div> นั้นมีอยู่สองตัวแต่เจ้า html() นั้นกลับดึงอิลิเมนต์แรกขึ้นมาตัวเดียวและทำการ Break ทันที ไม่เหมือนเจ้า text() ที่จะทำดึงจนกว่าจะหมดอิลิเมนต์เซ็ตที่เรากำหนด ถ้างงย้อนกลับไปดูตัวอย่างเก่าเรื่อง การใช้ Method Text()
ทีนี้มาต่อ
$("#idDiv2").html("<b>Hello</b>, ขอบคุณค่ะที่เข้ามาอ่าน !!!");
ลองรันดูอิิลิเมนต์ที่มี id=idDiv2 จะเปลี่ยนไป
<div id="idDiv1" class="cssDiv1">
ทดสอบการแสดงข้อความใน <b>div 1</b>
</div>
<div id="idDiv2" class="cssDiv2"><b>Hello</b>, ขอบคุณค่ะที่เข้ามาอ่าน !!!</div>
ทีนี้อย่างทีเรียวบอกข้างต้นว่าเจ้า Method html() นั้่นเวลามีอิลิเมนต์หลายตัวพอมันเจอตัวแรกมันจะึดึง content มาแล้ว break ทันทีไม่เหมือนเจ้า Method text() ทีจะดึงอิลิเมนต์ไปเรื่อย ๆ จนกว่าจะหมด
แต่เราสามารถแก้ได้ด้วยการส่ง Function เข้าไป
$("div").html(function(index,html) {
alert( "My id : "+this.id+"// My class : "+this.className);
});
ทีนี้ลองรันดูนะคะ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น