JavaScript中innerText和innerHTML的区别是什么?

如题所述

innerText返回或者设置DOM元素的文本

innerHTML返回或者设置DOM元素的子元素

1,返回值的区别

12345678

<div id="div1">      <p>文本信息</p></div><script>    var div =document.getElementById("div1");     var text = div1.innerText; // text --》文本信息    var html= div1.innerHTML; // html--》 <p>文本信息</p></script>

区别:取值时 innerText会把只会获取节点里面的文本信息,而innerHTML 会获取节点下面的所有标签。

2、设置值得区别

123456

<div id="div1"></div><script>    var div =document.getElementById("div1");     div1.innerText= '这里是文本信息换行'; //看效果一    div1.innerHTML= '这里是文本信息换行';//看效果二</script>

效果一

效果二

区别:设置值时 innerText会把html标签当做普通的文本显示,而innerHTML 则不会。

在javascript中如果我们要获取对象内容,js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里,可能很多人不知道吧,接下来跟着小编一起来学习innerHTML,innerText,outerHTML的用法及区别吧。

在javascript中如果我们要获取对象内容,js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里,可能很多人不知道吧,接下来跟着小编一起来学习innerHTML,innerText,outerHTML的用法及区别吧。

温馨提示:内容为网友见解,仅供参考
第1个回答  2018-01-09

如果使用innerHTML,获得的是根元素div内包含的所有节点,所以获得的内容为<div>my csdn</div>hello world。

用innerText时,所获得的仅仅是文本节点,于是得到的内容不包含DOM节点,得到的内容为纯文本“my csdn hello world”。

    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>

JavaScript中innerText和innerHTML的区别是什么?
区别:取值时 innerText会把只会获取节点里面的文本信息,而innerHTML 会获取节点下面的所有标签。2、设置值得区别 123456 <div id="div1"><\/div><script> var div =document.getElementById("div1"); div1.innerText= '这里是文本信息换行'; \/\/看效果一 div1.innerHTML= '这里是文本...

传送门 - JavaScript中innerText和innerHTML的区别
innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用 innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:<a href="javascript:alert(document.getElementB...

js中innerHTML与innerText的用法与区别
3、innerHTML和innerText区别:innerHTML返回的是标签内的 html内容,包含html标签。innerText返回的是标签内的文本值,不包含html标签。代码示例为:<p id="test"><font color="#000">获取段落p<\/font>测试<\/p> document.getElementById("test").innerHTML 输出内容为:<font color="#000">获取段...

innerHTML和innerText什么区别
2、js中innerText的含义:InnerText获取或设置指定元素标记内的文本的值,从元素标记的开始到元素标记的结束(不包括HTML标记)。获取元素的内容:element.innertext;元素设置:元素。innertext=实现字符串;代码示例如下:获取p段的innerHTML测试 文档。getElementById(“测试”)。InnerHTML 输出是:获取p...

innerhtml和innertext的区别
<a href="javascript:alert(test.innerHTML)">innerHTML内容<\/a> <a href="javascript:alert(test.innerText)">inerHTML内容<\/a> 共同点:innerHTML和innerText都会把元素内内容替换掉。不同点:1,innerHTML:也就是从对象的起始位置到终止位置的全部内容,包括Html标签。上例中的test.innerHTML的值...

innerhtml和innertext怎么区分
innerhtml和innertext怎么区分 共同点:innerHTML和innerText都会把元素内内容替换掉。不同点:1,innerHTML: innerHTML是符合W3C标准的属性,也就是从对象的起始位置到终止位置的全部内容,包括Html标签。2,innerText: 而innerText只适用于IE浏览器 从起始位置到终止位置的内容, 但它去除Html标签 ...

js中innerHTML与innerText的用法与区别
两者的区别在于,innerHTML返回的是包含HTML标签的完整内容,而innerText则只返回纯文本部分。获取节点文本值的方法有多种:- 原生JavaScript:`document.getElementById('test').innerHTML`- jQuery:`$('#test').html()`至于获取节点本身,可以通过id、类名、标签名或name属性:- 通过id:`document....

JavaScript中innerText和innerHTML的区别
<div> <span>内容<\/span><\/div>使用这几个来获取上面div的内容的话,区别如下:innerHTML: <span>内容<\/span>,带有html标签innerText: 内容 不带html标签outerHTML: <div><span>内容<\/span><\/div>outerText: 获取元素跟innterText是一样的。使用这几个来改变某个元素的内容 <...

JavaScript中innerText和innerHTML的区别
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。相当于它只获取文字内容。

innerHTML和innerText的使用和区别
了解innerHTML和innerText这两个属性是理解JavaScript DOM操作的关键。它们皆用于获取和设置HTML元素的内容,但存在细微区别。两者在获取元素文本内容时表现一致,但在设置内容时有显著差异。innerText仅更新标签内部的文本,而outerText则更新包括标签自身在内的文本内容。对比示例1显示,当尝试通过不同浏览器执行...

相似回答