คุณสมบัติHTML DOM innerText
ตัวอย่าง
รับข้อความภายในขององค์ประกอบ:
var x =
document.getElementById("myBtn").innerText;
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติ innerText ตั้งค่าหรือส่งคืนเนื้อหาข้อความของโหนดที่ระบุ และรายการย่อยทั้งหมด
หากคุณตั้งค่าคุณสมบัติ innerText โหนดย่อยใดๆ จะถูกลบออกและแทนที่ด้วยโหนดข้อความเดียวที่มีสตริงที่ระบุ
หมายเหตุ:คุณสมบัตินี้คล้ายกับ คุณสมบัติ textContentอย่างไรก็ตาม มีความแตกต่างบางประการ:
- textContent ส่งคืนเนื้อหาข้อความของ องค์ประกอบ ทั้งหมดในขณะที่ innerText ส่งคืนเนื้อหาขององค์ประกอบทั้งหมด ยกเว้น องค์ประกอบ <script> และ <style>
- innerText จะไม่ส่งคืนข้อความขององค์ประกอบที่ซ่อนอยู่ด้วย CSS (textContent will)
เคล็ดลับ:หากต้องการตั้งค่าหรือส่งคืนเนื้อหา HTML ขององค์ประกอบ ให้ใช้คุณสมบัติinnerHTML
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| innerText | 4.0 | 10.0 | 45.0 | 3.0 | 9.6 |
ไวยากรณ์
ส่งคืนเนื้อหาข้อความของโหนด:
node.innerText
ตั้งค่าเนื้อหาข้อความของโหนด:
node.innerText = text
มูลค่าทรัพย์สิน
| Value | Type | Description |
|---|---|---|
| text | String | Specifies the text content of the specified node |
รายละเอียดทางเทคนิค
| คืนมูลค่า: | สตริงที่แสดงถึงเนื้อหาข้อความ "แสดงผล" ของโหนดและลูกหลานทั้งหมด |
|---|
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงความแตกต่างบางอย่างระหว่าง innerText, innerHTML และ textContent:
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
รับเนื้อหาของ <p> องค์ประกอบด้านบนด้วยคุณสมบัติที่ระบุ:
innerTextส่งคืน: "องค์ประกอบนี้มีระยะห่างพิเศษและมีองค์ประกอบช่วง"
innerHTMLส่งกลับ: " องค์ประกอบนี้มีระยะห่างพิเศษและมี <span>องค์ประกอบช่วง</span>"
textContentส่งคืน: " องค์ประกอบนี้มีระยะห่างพิเศษและมีองค์ประกอบช่วง"
คุณสมบัติ innerText ส่งคืนเฉพาะข้อความโดยไม่มีการเว้นวรรคและแท็กองค์ประกอบภายใน
คุณสมบัติ innerHTML ส่งคืนข้อความ รวมถึงแท็กการเว้นวรรคและองค์ประกอบภายในทั้งหมด
คุณสมบัติ textContent ส่งคืนข้อความที่มีระยะห่าง แต่ไม่มีแท็กองค์ประกอบภายใน