innerHtml,outerHtml,innerText,outerText之间的区别

innerHtml,outerHtml,innerText,outerText之间的区别

下面展示一些 代码

写一个简单的div标签嵌套一个P标签

/*html 代码*/
<div id="box">
	我是box 里的文本
	<p>我是一个P</p>
</div>

下面是JS代码，通过控制台输出结果观察他们的不同之处

// js 代码
var obox=document.getElementById('box');
			console.log(obox.innerHTML)
			//我是box 里的文本
			//<p>我是一个P</p>
			console.log(obox.outerHTML)
			//<div id="box">
			//我是box 里的文本
           //<p>我是一个P</p>
           //</div>
			console.log(obox.innerText)
			//我是box 里的文本
			//我是一个P
			console.log(obox.outerText)
			//我是box 里的文本
			// 我是一个P

总结：innerHtml 和 outerHtml 都包含标签，不同的是outerHtml包含根元素标签。innerText和outerText都是只包含文本。