一、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>
时间： 2024-10-12 04:11:50