innerHTML和innerText这两个属性经常会用到,但至今我还没有搞清楚2者的区别,今天我自己想通过几个实例来看看在获取dom内容时究竟有什么不一样。
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>innerHTML和innerText区别之我见-www.woaidaogu.com</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ x=$("li").toArray() for (i=0;i<x.length;i++) { alert(x[i].innerHTML); } }); }); </script> </head> <body> <button><b>你喜欢喝什么?</b></button> <ul> <li>我喜欢喝<b>Coffee</b>!</li> <li>我喜欢喝<b>Milk</b>!</li> <li>我喜欢喝<b>Soda</b>!</li> </ul> </body> </html>
很明显第一个li标签取innerHTML的结果包含li标签内的所有内容包括html标签,"我喜欢喝<b>Coffee</b>!"。
innerText 设置或获取位于对象起始和结束标签内的文本
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>innerHTML和innerText区别之我见-www.woaidaogu.com</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ x=$("li").toArray() for (i=0;i<x.length;i++) { alert(x[i].innerText); } }); }); </script> </head> <body> <button><b>你喜欢喝什么?</b></button> <ul> <li>我喜欢喝<b>Coffee</b>!</li> <li>我喜欢喝<b>Milk</b>!</li> <li>我喜欢喝<b>Soda</b>!</li> </ul> </body> </html>
很明显第一个li标签取innerText的结果包含li标签内的除了html标签<b>和</b>的所有内容,"我喜欢喝Coffee!"。
在这里innerText属性的作用相当于过滤掉了html标签。
通过以上内容我们更加了解了innerHTML和innerText属性的区别,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!