JavaScript中innerText和innerHTML的区别

 我来答
两口两千言0
2016-04-18 · TA获得超过4121个赞
知道大有可为答主
回答量:2418
采纳率:78%
帮助的人:964万
展开全部

1、innerHTML:

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

2、innerText:

  从起始位置到终止位置的内容, 但它去除Html标签 


举例:

<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是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用

innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">去除HTML标签后的文本</a>

纯洁的小树
推荐于2018-02-27 · TA获得超过3386个赞
知道大有可为答主
回答量:2536
采纳率:71%
帮助的人:469万
展开全部

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

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


  1,返回值的区别

<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、设置值得区别

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

  效果一

  效果二

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

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
已然多健忘313
2018-03-30 · TA获得超过9985个赞
知道小有建树答主
回答量:40
采纳率:100%
帮助的人:9068
展开全部

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的用法及区别吧。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
万古长空nice
2016-04-18
知道答主
回答量:17
采纳率:0%
帮助的人:3.6万
展开全部
这是其中一个,我觉得很不错的。
原理:采用innerText 或者 innerHTML
<script language=”javascript”>
var stock_code = stockcode.innerText;
var stock_code = stockcode.innerHTML;
</script>
<div id="stockcode" style="display:none">
test
</div>

innerText 跟 innerHTML是两个非DOM标准的方法
其区别如图所示:
(图中应该为innerText)

在IE中 innerText 跟 inner HTML 两个方法都能正常运行
但是FF里面的innerText不可用,但是有一个替代方法: textContent
IE: oDiv.innerText = aString; oDiv.innerHTML = aString;
FF: oDiv.textContent = aString; oDiv.innerHTML = aString;
Ajax in action 的作者之一Eric 用正则表达式 实现了 一个兼容方法,比较有趣
Hope this helps
A little smirk
One day a secretary is leaving on her lunch break, and she notices her boss standing in front of a shredder with a clueless look on his face. The secretary walks up to him and asks if he needs help.
"Yes!" he says looking and sounding relieved, "This is very important."
Glad to help, she turns the shredder on and inserts the paper. Then her boss says, "Thanks, I only need one copy."
Create function like innerText
As you may have figured out innerText is IE only. That means that browsers like Mozilla, Firefox, and Netscape will return undefined. If you do not know what innerText does, it strips out all of the tags so you only see the text.
For example, if a div contains the HTML <span id='span1'>Eric</span>, innerHTML would return <span id='span1'>Eric</span> while innerText will return Eric.
Now to make innerHTML act the same we need to use some regular expressions with the strings replace() method.
Now the basic pattern we need to match is or or or
Now the regular expression we need to use is /<\/[^>]+>/gi
If you do not know regular expressions here is a quick explanation:
/ - Starts the regular expression
< - Match the less than sign
\/ - Escape the character / so it can be matched (Without the \ you would be saying it is the end of the reg exp.)
- Match the / character 0 or 1 times
[^>] - Match any character but greater than sign
+ - Match [^>] one or more times
> - Match greater than sign
/ - End the regular expression
gi - Tells regular expression to match global and ignore the case
So now the function to replace the text would look like:
代码如下:
<script type="text/javascript">
var regExp = /<\/[^>]+>/gi;
function ReplaceTags(xStr){
xStr = xStr.replace(regExp,"");
return xStr;
}
</script>

完整:

<html>
<head>
<script type="text/javascript">
var regExp = /<\/[^>]+>/gi;
function ReplaceTags(xStr){
xStr = xStr.replace(regExp,"");
return xStr;
}
</script>
</head>
<body>
<div id="test">
<span id="span1">Test <u><b>Test</b></u> Test
<a href="#">Wow</a>!</span>
</div>
<script type="text/javascript">
var xContent = document.getElementById("test").innerHTML;
var fixedContent = ReplaceTags(xContent);
alert(fixedContent);
</script>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式