JavaScript中innerHTML,innerText,outerHTML的用法及区别
发布网友
发布时间：2022-05-13 14:51
我来回答
共2个回答
热心网友
时间：2022-05-13 16:20
不废话了，请看下文示例介绍。
用法：
<div
id="test">
<span
style="color:red">test1</span>
test2
</div>
在JS中可以使用：
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span
style="color:red">test1</span>
test2
”。
test.innerText:
从起始位置到终止位置的内容,
但它去除Html标签
上例中的text.innerTest的值也就是“test1
test2”,
其中span标签去除了。
test.outerHTML:
除了包含innerHTML的全部内容外,
还包含对象标签本身。
上例中的text.outerHTML的值也就是
<div
id="test"><span
style="color:red">test1</span>
test2</div>
完整示例：
<div
id="test">
<span
style="color:red">test1</span>
test2
</div>
<a
href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a
href="javascript:alert(test.innerText)">inerHTML内容</a>
<a
href="javascript:alert(test.outerHTML)">outerHTML内容</a>
特别说明：
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a
href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
innerHTML和innerText如何区分？
示例代码：
<div
id="test">
<span
style="color:red">test1</span>
test2
</div>
<a
href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a
href="javascript:alert(test.innerText)">inerHTML内容</a>
共同点：innerHTML和innerText都会把元素内内容替换掉。
不同点：
1，innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span
style="color:red">test1</span>
test2
”。
2，innerText:
从起始位置到终止位置的内容,
但它去除Html标签
上例中的text.innerTest的值也就是“test1
test2”,
其中span标签去除了。
值得注意的是，innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。
以上就是介绍JavaScript中innerHTML，innerText，outerHTML的用法及区别，希望大家喜欢。
innerHTML,innerText和outerHTML,outerText的区别
1、区别描述如下：innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签...
innerHTML,innerText和outerHTML,outerText的区别
1）innerHTML 设置或获取位于对象起始和结束标签内的 HTML内容 2）innerText 设置或获取位于对象起始和结束标签内的文本 3）outerHTML设置或获取对象及其内容的 HTML 形式 4）outerText 设置(包括标签)或获取(不包括标签)对象的文本 重点强调指出：innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析...
JavaScript中innerHTML,innerText,outerHTML的用法及区别
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：<a href="javascript:alert(document.getElementByI...
js中innerHTML与innerText的用法与区别
输出内容为:<font color="#000">获取段落p的 innerHTML</font> 2、js中innerText的用法：innerText可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)。获取元素的内容：element.innerText;给元素设置内容：element.innerText = string;代码示例为：<p ...
JavaScript中innerText和innerHTML的区别
<div> <span>内容</span></div>使用这几个来获取上面div的内容的话，区别如下：innerHTML: <span>内容</span>，带有html标签innerText: 内容 不带html标签outerHTML: <div><span>内容</span></div>outerText: 获取元素跟innterText是一样的。使用这几个来改变某个元素的内容 <...
innerHTML,innerText和outerHTML,outerText的区别
举个例子来说吧。 内容 使用这几个来获取上面div的内容的话，区别如下： innerHTML: 内容，带有html标签 innerText: 内容 不带html标签 outerHTML: 内容 outerText: 获取元素跟innterText是一样的。 使用这几个来改变某个元素的内容 innerHTML="...
JavaScript中innerText和innerHTML的区别是什么?
效果二 区别：设置值时 innerText会把html标签当做普通的文本显示，而innerHTML 则不会。在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，outerHTML的...
innerHTML,innerText,outerHTML和value的区别
innerHTML: 属性设置或返回表格行的开始和结束标签之间的 HTML。（也就数说，用innerHTML的元素必须是标签对的形式，也就是input啥都输不出来）。outerHTML: 设置或获取对象及其内容的 HTML 形式。（标签对，input输出本身）innerText： 设置或获取位于对象起始和结束标签内的文本。（标签对,input啥也输不...
innerHTML和outerHTML的区别是什么
1、js中innerHTML的含义：InnerHTML获取或设置指定元素标记内的HTML内容，从元素标记的开始到元素标记的结束（包括HTML标记）。获取元素的内容：元素设置：元素。innerhtml＝htmlString；代码示例如下：得到了innerHTML 段p 文档。getelementbyid（“test”）。innerHTML 获取p段的innerHTML 2、js中innerText...
传送门 - JavaScript中innerText和innerHTML的区别
</div> <a href="javascript:alert(test.innerHTML)">innerHTML内容</a> <a href="javascript:alert(test.innerText)">inerHTML内容</a> 特别说明：innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用 innerText，如果要输出不含HTML标签的内容，...
