下面我来详细讲解“innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解”。
一、innerHTML属性
innerHTML
是DOM元素的一个属性,用于获取或设置该元素内部的HTML内容。
获取元素内部的HTML内容
<div id="myDiv">
<p>这是一个段落</p>
<strong>这是一段强调文本</strong>
</div>
const div = document.getElementById('myDiv');
console.log(div.innerHTML);
// 输出:<p>这是一个段落</p><strong>这是一段强调文本</strong>
设置元素内部的HTML内容
<div id="myDiv"></div>
const div = document.getElementById('myDiv');
div.innerHTML = '<p>这是一个段落</p><strong>这是一段强调文本</strong>';
注意事项
- 当设置
innerHTML
属性时,原来元素上绑定的事件和数据将会被清空,因此要小心使用。
二、outerHTML属性
outerHTML
是DOM元素的一个属性,用于获取或设置该元素和该元素内部的HTML内容。
获取元素及其内部的HTML内容
<div id="myDiv">
<p>这是一个段落</p>
<strong>这是一段强调文本</strong>
</div>
const div = document.getElementById('myDiv');
console.log(div.outerHTML);
// 输出:<div id="myDiv"><p>这是一个段落</p><strong>这是一段强调文本</strong></div>
设置元素及其内部的HTML内容
<div id="myDiv"></div>
const newDiv = document.createElement('div');
newDiv.innerHTML = '<p>这是一个段落</p><strong>这是一段强调文本</strong>';
const oldDiv = document.getElementById('myDiv');
oldDiv.outerHTML = newDiv.outerHTML;
注意事项
- 当设置
outerHTML
属性时,原来元素及其内部的事件和数据将会被清空,因此要小心使用。 - 当获取
outerHTML
属性时,会包含元素自身和其内部的HTML内容。
三、textContent属性
textContent
是DOM元素的一个属性,用于获取或设置该元素内部的纯文本内容。
获取元素内部的纯文本内容
<div id="myDiv">
<p>这是一个段落</p>
<strong>这是一段强调文本</strong>
这是一段普通文本
</div>
const div = document.getElementById('myDiv');
console.log(div.textContent);
// 输出:这是一个段落这是一段强调文本这是一段普通文本
设置元素内部的纯文本内容
<div id="myDiv">
<p>这是一个段落</p>
<strong>这是一段强调文本</strong>
这是一段普通文本
</div>
const div = document.getElementById('myDiv');
div.textContent = '这是新的内容';
注意事项
- 当设置
textContent
属性时,原来元素上绑定的事件将会被清空,但元素本身不会被删除,因此比innerHTML
和outerHTML
更安全。
四、innerText属性
innerText
是DOM元素的一个属性,用于获取或设置该元素内部的文本内容,但会对包括空格、换行符等在内的所有空白符进行赋值和读取。
获取元素内部的文本内容
<div id="myDiv">
<p>这是一个段落</p>
<strong>这是一段强调文本</strong>
这是一段普通文本
</div>
const div = document.getElementById('myDiv');
console.log(div.innerText);
// 输出:这是一个段落 这是一段强调文本 这是一段普通文本
设置元素内部的文本内容
<div id="myDiv">
<p>这是一个段落</p>
<strong>这是一段强调文本</strong>
这是一段普通文本
</div>
const div = document.getElementById('myDiv');
div.innerText = '这是新的内容';
注意事项
- 与
textContent
区别,innerText
会对包括空格、换行符等在内的所有空白符进行赋值和读取,因此比textContent
更常用。 - 当设置
innerText
属性时,原来元素上绑定的事件将会被清空,但元素本身不会被删除,因此比innerHTML
和outerHTML
更安全。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解 - Python技术站