innerHTML和outerHTML以及innerText和outerText之间的区别

一、innerHTML和outerHTML的关系
在面试中也常常问道innerHTML和outerHTML之间的区别，这里我们总结一下。innerHTML表示内部文本，如下所示。

<div><h1>大家好</h1></div>

其打印其innerHTML的值为：

<h1>大家好</h1>

outerHTML表示外部文本，包含标签。
其打印outerHTML的值为:

<div><h1>大家好</h1></div>

二、outerText和innerText的关系
outerText和innerText两者都表示内部文本，两者的打印结果是一致的。

<h1>大家好<span>你是谁</span></h1>

innerText的结果：

大家好你是谁

outerText的结果：

大家好你是谁

不同点：
innerText和outerText对其进行赋值的时候，表现结果不同。

<h1>大家好<span>你是谁</span></h1>

使用innerText进行赋值的结果：

使用outerText进行赋值为：

如上图所示两者之间的差别可以总结为：innerText在对其内部文本进行赋值时，不会对外部标签赋值，但是outerText对其内部文本赋值时吗，包含外部标签。

innerHTML和outerHTML以及innerText和outerText之间的区别相关推荐

JavaScript中innerHTML、outerHTML、innerText、outerText的用法与区别认识
2017百度前端技术学院(js任务一) 一.JS中innerHTML.outerHTML.innerText.outerText.value的区别与联系? 在JS中很容易将以上几者记错弄混,在网上找了 ...
JS中innerHTML、outerHTML、innerText、outerText的用法与区别
1.功能说明: innerHTML 设置或获取位于对象起始和结束标签内的 HTML innerText 设置或获取位于对象起始和结束标签内的文本 outerHTML 设置或获取对象及其内容的HTML形 ...
textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别
今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...
innerText，outerText，innerHTML，outerHTML区别
document.body.innerHTML: innerText,outerText,innerHTML,outerHTML资料outerHTML:标签对象外部的HTML文本(包括该标签) i ...
JS中innerHTML,innerText,outHTML的用法及区别
一张图解释: 对于一个id为"testdiv"的div来说,outerHTML.innerHTML以及innerTEXT三者的区别可以通过下图展示出来: 文字解释: innerHT ...
[js] innerHTML与outerHTML有什么区别？
[js] innerHTML与outerHTML有什么区别? <div id="test"><h5>就是喜欢你</h5></div> ...
JS对象与Dom对象与jQuery对象之间的区别
前言通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
[转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别
要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...
FPGA与ASIC：它们之间的区别以及使用哪一种？
FPGA与ASIC:它们之间的区别以及使用哪一种? FPGA Vs ASIC: Differences Between Them And Which One To Use? VL82C486 Sing ...
Python 应用领域以及版本之间的区别
Python 应用领域以及版本之间的区别一．Python应用领域 Python+人工智能,给你更多研究方向选择! 企业级综合实战项目,集六大前沿技术为一体二. Python 2与Python 3的 ...

innerHTML和outerHTML以及innerText和outerText之间的区别

innerHTML和outerHTML以及innerText和outerText之间的区别相关推荐

最新文章

热门文章