JavaScript DOM之Element对象属性innerHTML、innerText和outerHTML三者的区别

三大属性

属性	描述
innerHTML	设置或返回元素内部的HTML结构与内容
innerText	设置或返回元素内部的文本节点
outerHTML	设置或返回自身HTML结构与内容

      innerHTML属性声明了元素含有的HTML文本，不包括元素本身的开始标记和结束标记。innerText属性只能声明元素包含的文本内容，即使指定的是HTML文本，他也只会输出HTML文本的字符形式。outerHTML和前者类似，但是唯一不同的是它包含自身的开始标记和结束标记，最终替换的是整个目标节点，而不是目标内部节点结构。

案例代码

 

属性	说明	结果展示	HTML代码
innerHTML	插入格式	li[1].innerHTML = '<li class="liElement">4</li>'	<ul id="ulElement">     <li class="liElement">1</li>     <li class="liElement">2</li>     <li class="liElement">3</li> </ul>
	变化	结果   结构
innerText	插入格式	li[1].innerText = '<li class="liElement">4</li>';
	变化	结果 结构
outerHTML	插入格式	li[1].outerHTML = '<li class="liElement">2</li>';
	变化	结果 结构