案例如下:
先来看一下直接效果:最大的区
innerHTML 获取内容的时候,会把标签也获取到
innerText 获取内容的时候,会把标签过滤掉
<!DOCTYPE html> <html> <head lang="en"> <title></title> </head> <body> <div id="box">box</div> <!-- <div id="box"> 我是box里面的p标签<p>我是一个段落</p> </div> <span></span> <a href=""></a> <p></p> <p> © --> <script> var box = document.getElementById('box'); // 老版本的IE支持innerText box.innerText = ''; // 老版本的firefox 支持 textContent var a;//undefined var o={}; console.log(o.a);//undefined //1 获取标签之间的内容 // innerHTML 和 innerText 获取内容的区别 // innerHTML 获取内容的时候,会把标签也获取到 // innerText 获取内容的时候,会把标签过滤掉 // console.log(box.innerText); // console.log(box.innerHTML); //2 设置标签之间的内容 //设置内容的时候,如果内容中又标签, 会解析标签 // innerHTML 不是标准的dom属性 //box.innerHTML = 'O(∩_∩)O哈哈~<b>程序员</b><p>这是一个段落</p>' // 设置内容的时候,如果内容中又标签,会对标签进行转义 // 最早的IE中增加的属性,老版本的firefox不支持属性 //老版本的firefox textContent //box.innerText = 'O(∩_∩)O哈哈~<b>程序员</b><p>这是一个段落</p>' </script> </body> </html>