HTML DOM Element innerHTML 属性

定义和用法

innerHTML 属性设置或返回元素的 HTML 内容（内部 HTML）。

另请参阅：

innerText 属性

textContent 属性

实例

例子 1

获取 id="myP" 元素的 HTML 内容：

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

Subukan nang personal

例子 2

更改 id="demo" 元素的 HTML 内容：

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

Subukan nang personal

例子 3

获取 id="myList" 的 <ul> 元素的 HTML 内容：

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

Subukan nang personal

例子 4

删除 id="demo" 的 <p> 元素的 HTML 内容：

element.innerHTML = "";

Subukan nang personal

例子 5

更改两个元素的 HTML 内容：

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

Subukan nang personal

例子 6

Ipalit ang HTML nilalaman ng elemento:

element.innerHTML += element.innerHTML;

Subukan nang personal

Halimbawa 7

Ibabaguhin ang HTML nilalaman at URL ng link:

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

Subukan nang personal

Gramata

Ibigay ang innerHTML na attribute:

element.innerHTML

I-set ang innerHTML na attribute:

element.innerHTML = text

Halaga ng attribute

Halaga Paglalarawan
String. HTML nilalaman.

Bilang na ibibigay

Uri Paglalarawan
String Ang HTML nilalaman ng elemento.

Kaibahan ng innerHTML, innerText at textContent

Ang innerText na attribute ay nagbibigay ng:

Tanging ibibigay ang teksto ng elemento at lahat ng kanilang lahat na hila, walang CSS na nakatago na espasyo at tag, maliban sa mga <script> at <style> na elemento.

Ang innerHTML na attribute ay nagbibigay ng:

Ang teksto ng elemento, kasama ang lahat ng mga walang laman at mga HTML tag na nasa loob.

Ang textContent na attribute ay nagbibigay ng:

Ang teksto ng elemento at lahat ng kanilang lahat na hila, na may mga walang laman at CSS na nakatago na teksto, ngunit walang tag.

Halimbawa ng HTML

<p id="myP">   Ang elementong ito ay may dagdag na pagkakalat ng espasyo at naglalaman ng <span>isang span element</span>.</p>

Halimbawa sa JavaScript

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

Subukan nang personal

Sa itaas na halimbawa:

Ang innerText na attribute ay nagbibigay ng:

Ang elementong ito ay may dagdag na pagkakalat ng espasyo at naglalaman ng isang span element.

Ang innerHTML na attribute ay nagbibigay ng:

   Ang elementong ito ay may dagdag na pagkakalat ng espasyo at naglalaman ng <span>isang span element</span>.

Ang textContent na attribute ay nagbibigay ng:

   Ang elementong ito ay may dagdag na pagkakalat ng espasyo at naglalaman ng isang span element.

Sumusuporta ang browser

Lahat ng mga browser ay sumusuporta element.innerHTML：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporta Suporta Suporta Suporta Suporta Suporta