1、innerText
通过innerText属性可以操作元素中包含的所有内容,无论文本位于子文档树种的什么位置。几个例子:
<body>
<div id="content">
<p>这里是有关的内容</p>
<ul>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<script type="text/javascript">
var div=document.getElementByIdx_x_x("content");
div.innerText="HellO WORLD!";
</script>
</body>
执行这段代码后,页面的HTML代码与下面的代码结果是相似的:
<div id="content">Helloworld</div>
可见innerText属性移除了先前存在的所有子节点,完全改变了DOM字树。此外,通过设置innerText属性还可以对所有出现在文本中的HTML语法字符(大于号,小于号,引号)进行编码;例如:
div.innerText="Hello&welcome,<b>"reader"!</b>";//这个与下面的代码是相同的
<div>Hello &welcome,<b>"reader"!</b></div>
兼容问题:IE,Safari,Opera和Chrome支持innerText属性,但是FF不支持innerText,但支持作用类似的textContent属性。textContent是DOM3级规定的一个属性,而且得到Safari、Opera和Chrome支持。为了确保跨浏览器兼容,有必要向下面这样通过函数来检测可以使用哪个属性:
(1)、如果要设置属性时候
function setInnerText(element,text){
if (typeof element.textContent=="string"){
element.textContent=text;
}
else{
element.innerText=text;
}
}
vardiv=document.getElementByIdx_x_x("content");
var txt="幸福了吗,杨艺辉";
setInnerText(div,txt);
(2)、如果要获取相应的属性则:
function getIn nerText(element){
return (typeofelement.textContent=="string")?element.textContent:element.innerText
}
以上就可以解决跨浏览器兼容问题。
2、innerHTML
在读取信息时候:innerHTML返回当前元素所有子节点的HTML表现,包括元素、注视以及文本节点。
在写入信息时候:innerHTML会按照指定的值创建新的DOM子树,并以该子数替换当前元素的所有子节点。
innerHTML与innerText最大的区别在于:
innerHTML处理的是HTML字符串,而innerText处理的是普通文本字符串。两个在等号后面一般会加双引号来表示要插入的东西,只是在innerText中<b>会被输出,而在innerHTML中<b>会被解释成HTML标签
并不是所有的元素都支持HTML属性,不支持innerHTML元素有:<col>,<colgrounp>,<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<title>、<tr>