innerHTML和innerText的使用和区别

document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的；

1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)

2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）

3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）

4） outerText设置或获取标签自身及其所包含的文本信息（包括自身）

innerText和outerText在获取的时候是相同效果，但在设置时，innerText仅设置标签所包含的文本，而outerText设置包含包括标签自身在内的文本。

示例代码：

示例1：

通过IE浏览器打开，弹出内容为"hello world"和"hello world"

通过Firefox浏览器打开，弹出内容为"hello world"和"undefined"

通过chrome浏览器打开，弹出的内容为"hello world"和"hello world"

alert(content.outerHTML)则弹出："<p id="p1">hello world</p>"

示例2

通过IE浏览器打开，弹出内容为"<p id="p1">hello world</p>"和"hello world"

通过Firefox浏览器打开，弹出内容为"<p id="p1">hello world</p>"和"undefined"

通过chrome浏览器打开，弹出的内容为"<p id="p1">hello world</p>"和"hello world"

alert(content.outerHTML)则弹出："<div id="d1"><p id="p1">hello world</p></div>"

综上：innerHTML所有浏览器都支持，innerText是IE浏览器支持的，Firefox浏览器不支持。

不同之处：

1） innerHTML、outerHTML在设置标签之间的内容时，包含的HTML会被解析；而innerText、outerText则不会；

2） innerHTML、innerText仅设置标签之间的文本，而outerHTML、outerText设置包含自身标签在内文本

出处：https://home.cnblogs.com/u/hongzm/

转载于:https://www.cnblogs.com/siduoxiaohua/p/10530876.html

innerHTML和innerText的使用和区别相关推荐

JavaScript中innerHTML与innerText，createTextNode的区别
innerHTML和innerText 它们都会把元素内内容替换掉,区别在于: innerHTML 会把替换内容里的 HTML 标记解释执行. innerText 会把替换内容里的 HTML 标记原样 ...
js中innerHTML与innerText的用法与区别【转自http://blog.sina.com.cn/johnpu】
用法:SupeSite/X-Space官方站%x-ZP$k?'DWZ_{ SupeSite/X-Space官方站K?_/T9s3^QJ a4X <div id="test"& ...
JS中的innerHTML，innerText，outerHTML的区别
一, 直接看demo <body><div id="test"><p>第一个</p></div><script t ...
javascript中innerHTML、innerText、outertHTML的区别与各自的用法
示例代码: <div id="test"> <span style="color:red">test1</span> tes ...
textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别
今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...
js中innerHTML和innerText jQuery中html()和text()的区别
js中innerHTML和innerText的区别 innerHTML innerHTML 会将标签和标签中的内容否获取回来 innerHTML .innerHTML = '<p>&l ...
innerHTML、innerText和outerHTML、outerText的区别
1.区别描述如下: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标 ...
InnerHTML、InnerText、outerHTML的用法与区别
InnerHTML.InnerText.outerHTML的用法与区别 InnerHTML获取或设置指定元素标记内的HTML内容,从元素标记的开始到元素标记的结束 InnerText获取或设置指定元素 ...
innerHTML与innerText与outHTML与outText 的区别。
innerHTML,baiinnerText和outerHTML,outerText的区别如下: 1)innerHTML 设置或获du取位于对象起始和结束zhi标dao签内的 HTML内容 2)inn ...
innerHTML和innerText的区别：
答:在js中我们通过如:document.getElementById("id");获取HTML的id名称,来获取id名所在的html标签,然后通过innerText或innerH ...

innerHTML和innerText的使用和区别

innerHTML和innerText的使用和区别相关推荐

最新文章

热门文章