一、innerText 属性
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); // alert(box.innerText);//获取文本并过滤掉包含该文本的HTML标签(直接删除掉的)火狐不支持 box.innerText='Mr.Lee';//设置值,替换掉原来有的文本 box.innerText='<strong>Mr.Lee</strong>';//Strong标签不起作用，直接转义为纯文本 }; </script> </head> <body> <div id="box"><p>测试Div</p></div> </body>
除了 Firefox 之外，其他浏览器均支持这个方法。但 Firefox 的 DOM3 级提供了另外一个类似的属性：textContent，做上兼容即可通用。
<script> window.onload =function(){ var box = document.getElementById("box"); alert(box.textContent); }; </script> </head> <body> <div id="box"><p>测试Div</p></div> </body>
做兼容方案：
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(getInnerText(box)); setInnerText(box,"wodedfadf"); //兼容方案 function getInnerText(element) { return (typeof element.textContent == 'string') ? element.textContent : element.innerText; } function setInnerText(element, text) { if (typeof element.textContent == 'string') { element.textContent = text; } else { element.innerText = text; } } }; </script> </head> <body> <div id="box"><p>测试Div</p></div> </body>
二、innerHTML 属性
<script> window.onload =function(){ var box = document.getElementById("box"); alert(box.innerHTML); //获取文本(不过滤 HTML标签) box.innerHTML = '<b>123</b>'; //可解析 HTML，结果文本加粗了; alert(box.innerHTML); }; </script> </head> <body> <div id="box"><p>测试Div</p></div> </body>
虽然 innerHTML 可以插入 HTML，但本身还是有一定的限制，也就是所谓的作用域元素，离开这个作用域就无效了。
<script> window.onload =function(){ var box = document.getElementById("box"); box.innerHTML = "<script>alert('Lee');</script>"; //<script>元素不能被执行 box.innerHTML = "<style>background:red;</style>"; //<style>元素不能被执行 }; </script> </head> <body> <div id="box"><p>测试Div</p></div> </body>
三、outerText
outerText 在取值的时候和 innerText 一样，同时火狐不支持，而赋值方法相当危险，他不单替换了文本内容，还将元素直接抹去。
<script> window.onload =function(){ var box = document.getElementById("box"); alert(box.outerText); box.outerText = '<b>123</b>'; alert(box.outerText); alert(document.getElementById('box')); //null，建议不去使用 }; </script> </head> <body> <div id="box"><p>测试Div</p></div> </body>
四、outerHTML
outerHTML 属性在取值和 innerHTML 一致，但和 outerText 也一样，很危险，赋值的之后会将元素抹去。
<script> window.onload =function(){ var box = document.getElementById("box"); box.outerHTML = '123'; alert(document.getElementById('box')); //null，建议不去使用，火狐旧版未抹去 }; </script> </head> <body> <div id="box"><p>测试Div</p></div> </body>