jQuery html(): คู่มือแทนที่ HTML Content แบบ Dynamic

jQuery มี methods มากมายสร้าง dynamic web experience html() method แทนที่ HTML ทั้งหมดภายใน selected element ใช้เมื่ออยากเปลี่ยนสิ่งที่ user เห็นหลัง interact กับหน้า

jQuery html() คืออะไร?

html() ตั้งค่า HTML contents ของทุก element ใน matched set ควรใช้ specific query เพื่อแทนที่เฉพาะ HTML ที่ต้องการ

เปลี่ยนแค่ content ส่วน style sheet คงเดิม content ใหม่จะ styled เหมือนเดิม html() ทำงานบน HTML document เท่านั้น ไม่ทำงานกับ XML

html() jQuery Syntax

jQuery methods เรียกบน selector ก่อน selector อาจกว้าง (<p>) หรือ specific (<div id='main-app'>) เรียก html() ส่ง HTML string เป็น parameter

html() รับ string literal หรือ variable ที่เก็บ string ทั้งคู่ render เหมือนกัน

ตัวอย่าง: แทนที่ Paragraph

<div class='main-content'>
  <p class='paragraphOne'> Hello World </p>
</div>

แทนที่ <p> tag ทั้งหมด:

$('div.main-content').html('<p>New Content</p>')

ผลลัพธ์:

<div class='main-content'>
  <p>New Content</p>
</div>

ส่ง string literal ธรรมดา (ไม่ใช่ HTML):

$('div.main-content').html('New Content')

ผลลัพธ์: <div class='main-content'> New Content </div> (ไม่มี p tag wrapping)

ส่ง string literal รักษาสไตล์เดิม ส่ง HTML string ทำให้ new content เป็น child element

ตัวอย่างจริง: รักษาสไตล์เดิม

<head>
  <style> .blue { color: blue; } </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
  <h2> html() Demo: </h2>
  <div class='main'>
    <p class='blue'> Hello </p>
    <p> World </p>
    <p> Goodbye </p>
  </div>
</body>

แค่ "Hello" สีฟ้า (class blue)

1. แทนที่ "Hello" รักษาสไตล์

$('p.blue').html("Hello AGAIN")

select paragraph class blue แทนที่ content สีฟ้าคงเหลือ เพราะ html() แทนที่ content ที่ wrapped ใน element names

2. แทนที่ทุก Paragraph

$('p').html("Hello AGAIN")

select ทุก <p> แทนที่แต่ละอันด้วย "Hello AGAIN" สไตล์เดิมคงเหลือ

3. แทนที่ทั้ง Div (ใช้ HTML string)

$('div.main').html('<p class=blue>Main Div Content</p>')

ใน main div มี 3 p tags html() แทนที่ทั้ง 3 ด้วย 1 p tag ใหม่ (พร้อม class blue) บรรทัดเดียวแทนที่หลาย elements และใช้สไตล์เดิม

สรุป

jQuery html() method ยอดนิยมสำหรับแทนที่ content บน HTML pages สร้าง dynamic experience เพราะแทนที่ content wrapped ใน HTML elements ต้องระวัง jQuery selectors และ style classes ป้องกัน style changes ที่ไม่ต้องการ