innerText
和innerHTML
是 JavaScript 中常用于操作 DOM 元素内容的属性。
innerText
:innerText
是一个属性,用于获取或设置元素的纯文本内容。它会返回元素及其子元素的文本内容,但不包含任何 HTML 标签。
<div id="myDiv"><p>Hello <span>world</span>!</p></div>var div = document.getElementById("myDiv");console.log(div.innerText); // 输出 "Hello world!"
上述示例中,innerText
返回了<div>
元素的纯文本内容,即 “Hello world!”。
注意,innerText
是一个可写属性,可以用来修改元素的文本内容。
innerHTML
:innerHTML
是一个属性,用于获取或设置元素的 HTML 内容。它返回元素及其子元素的 HTML 标记字符串,包括 HTML 标签和文本内容。
<div id="myDiv"><p>Hello <span>world</span>!</p></div>var div = document.getElementById("myDiv");console.log(div.innerHTML);
上述示例中,innerHTML
返回了<div>
元素的 HTML 内容,即<p>Hello <span>world</span>!</p>
。
与innerText
类似,innerHTML
也是一个可写属性,可以用来修改元素的 HTML 内容。
需要注意的是,使用innerHTML
或innerText
时应当注意安全性,避免将不受信任的内容直接插入到 HTML 中,以防止潜在的安全风险(如跨站脚本攻击)。在插入动态内容时,最好使用其他方法,如textContent
或创建 DOM 元素,并使用安全的方法进行内容的设置和替换。