JS -innerHtml,innerText,outerHTML的用法和区别

示例html代码:

<div id="test">
    <span style="color:red"> test1</span>test2
</div>

在JS中获取id为test的对象

const test = document.genElementById('test');

test.innerHTML

使用:也就是从对象的起始位置到终止位置的全部内容,包括Html标签

• 上面例子获取的test.innerHTML的值也就是

<span style="color:red"> test1</span>test2

test.innerText

使用:从起始位置到终止位置的内容,但是它要去除Html标签

• 上面例子中获取的test.innerText值是

 test1,test2

其中的span标签就会去除

test.outerHtml

使用:除了包含innerHTML的全部内容外,还包含对象标签本身

• 上面的test.outerHtml的值也就是

<div id="test">
    <span style="color:red"> test1</span>test2
</div>