คุณสมบัติ innerHTML ขององค์ประกอบ HTML DOM

คำอธิบายและวิธีใช้

innerHTML คุณสมบัติกำหนดหรือคืนค่า HTML ขององค์ประกอบ (HTML ภายใน)

ดูเพิ่มเติม:

คุณสมบัติ innerText

คุณสมบัติ textContent

ตัวอย่าง

ตัวอย่าง 1

ดึง HTML ขององค์ประกอบ ที่ id="myP":

let html = document.getElementById("myP").innerHTML;

ทดลองด้วยตัวเอง

ตัวอย่าง 2

เปลี่ยน HTML ขององค์ประกอบ ที่ id="demo":

document.getElementById("demo").innerHTML = "I have changed!";

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ดึง HTML ขององค์ประกอบ <ul> ที่ id="myList":

let html = document.getElementById("myList").innerHTML;

ทดลองด้วยตัวเอง

ตัวอย่าง 4

ลบ HTML ขององค์ประกอบ <p> ที่ id="demo":

element.innerHTML = "";

ทดลองด้วยตัวเอง

ตัวอย่าง 5

เปลี่ยน HTML ของสององค์ประกอบ:

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

ทดลองด้วยตัวเอง

ตัวอย่าง 6

ซ้ำ HTML ขององค์ประกอบ:

element.innerHTML += element.innerHTML;

ทดลองด้วยตัวเอง

ตัวอย่าง 7

เปลี่ยน HTML และ URL ของลิงก์:

element.innerHTML = "W3School";
element.href = "";

ทดลองด้วยตัวเอง

รูปแบบ

กลับค่าคุณสมบัติ innerHTML:

element.innerHTML

ตั้งค่าคุณสมบัติ innerHTML:

element.innerHTML = text

ค่าของคุณสมบัติ

ค่า คำอธิบาย
ข้อความ HTML ขององค์ประกอบ

ค่าที่กลับค่า

ชนิด คำอธิบาย
ข้อความ HTML ขององค์ประกอบ

ความแตกต่างระหว่าง innerHTML innerText และ textContent

innerText นิยายแก้ไขกลับ:

กลับค่าข้อความขององค์ประกอบและทุกหลายหลังทางขององค์ประกอบ ไม่มีช่องว่างซ่อนเร้นด้วย CSS และแท็ก ยกเว้นองค์ประกอบ <script> และ <style>

innerHTML นิยายแก้ไขกลับ:

ข้อความขององค์ประกอบ ซึ่งประกอบด้วยช่องว่างและแท็ก HTML ภายใน

textContent นิยายแก้ไขกลับ:

ข้อความขององค์ประกอบและทุกหลายหลังทางขององค์ประกอบ ซึ่งมีช่องว่างและข้อความซ่อนเร้นด้วย CSS แต่ไม่มีแท็ก

ตัวอย่าง HTML

<p id="myP">   This element has extra spacing     and contains <span>a span element</span>.</p>

ตัวอย่าง JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

ทดลองด้วยตัวเอง

ในตัวอย่างด้านบน:

innerText นิยายแก้ไขกลับ:

This element has extra spacing and contains a span element.

innerHTML นิยายแก้ไขกลับ:

   This element has extra spacing    and contains <span>a span element</span>.

textContent นิยายแก้ไขกลับ:

   This element has extra spacing    and contains a span element.

บราวเซอร์สนับสนุน

ทุกบราวเซอร์ทุกตัวสนับสนุน element.innerHTML：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน