我在这里介绍innerHTML、innerText、innerContent
一，innerHTML（可以识别标签）:
案例1：替换掉整个标签
<!--innerHTML-->
<p id="innerHtml" onclick="setInnerHtml(this.id)">这个是对innerHTML的操作</p>
<script type="text/javascript">
function setInnerHtml(obj){
var x = document.getElementById(obj);
x.innerHTML = '<h1>这个是innerHTML替换之后的内容</h1>'
}
</script>
案例2：用js的innerHTML来改变div值
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text' />
<script type="text/javascript">
function changeText() {
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
二，innerText：用来设置或者获取对象起始标签和结束标签内的文字内容；（火狐不兼容）
浏览器支持：IE、Chrome
赋值操作：先将ASCII实体对应的字符（<、>、&、'和"）转换为实体名，然后把处理后的值赋予给innerHTML属性。
取值操作：innerText的取值实际上就是对innerHTML的属性值进行一系列处理，然后返回，具体步骤如下
1. 对HTML标签进行解析；
2. 对CSS样式进行带限制的解析和渲染；
3. 将ASCII实体转换为对应的字符；
4. 剔除格式信息（如\t、\r和\n等），将多个连续的空格合并为一个。
<p id="innerText">这是对innerText的操作</p>
<input type="button" onclick="setInnerText('innerText')" value="替换innerText"/>
<input type="button" onclick="getInnerText('innerText')" value="获取innerText"/>
<script type="text/javascript">
function setInnerText(id){
document.getElementById(id).innerText = "这个是替换好的文字";
}
function getInnerText(id){
var _innerText = document.getElementById(id).innerText;
alert(_innerText);
}
</script>
三、innerContent：用来设置或者获取对象起始标签和结束标签内的文字内容，用法同innerText；
浏览器支持：IE9~11、FireForx、Chrome；
赋值操作：先将ASCII实体对应的字符（<、>、&、'和"）转换为实体名，然后把处理后的值赋予给innerHTML属性。
取值操作：textContent的取值实际上就是对innerHTML的属性值进行一系列处理，然后返回，具体步骤如下
1. 对HTML标签进行剔除；
2. 将ASCII实体转换为相应的字符。
注意：
a). 对HTML标签是剔除不是解析，也不会出现CSS解析和渲染的处理，因此<br/>等元素是不生效的。
b). 不会剔除格式信息和合并连续的空格，因此\t、\r、\n和连续的空格将生效。
四、综上所述，我们总结如下：
1、IE、Safari、Opera和Chrome支持innerText属性。Firefox虽然不支持innerText，但支持作用类似的textContent属性。textContent是DOM3级规定的一个属性，而且也得到了safari、opera和Chrome的支持。为了确保跨浏览器兼容，有必要想下面这样通过函数来检测可以使用哪个属性：
<div id="content">综合测试</div>
<input type="button" value="获取元素内容" onclick="getText('content')" />
<input type="button" value="设置元素内容" onclick="setText('content', 'hello world!!!')" />
<script type="text/javascript">
//获取元素的内容
function getText(el) {
var obj = document.getElementById(el);
var result = (typeof obj.textContent == "string") ? obj.textContent : obj.innerText;
alert(result);
return result;
}; //设置元素的内容
function setText(el, text) {
var obj = document.getElementById(el);
if(typeof obj.textContent == "string") {
obj.textContent = text;
} else {
obj.innerText = text;
}
};
</script>
2、可以封装成一个函数，如果传入对象，则表示获取；如果传入一个对象和一个字符串，表示设置；
<!--封装函数-->
<div id="pack-function">把innerHTML、innerText封装成为函数</div>
<input type="button" value="封装成函数之后获取内容" id="get-text" />
<input type="button" value="封装成函数之后设置内容" id="set-text" />
<script type="text/javascript">
/*
* 如果传入一个对象，就是获取值，
* 如果传入一个对象和一个字符串，就是设置值
*/
function setText(obj, str) {
if(obj.innerText) {
//console.log(Boolean(str));
if (str) {
obj.innerText = str;
} else{
return obj.innerText;
}
} else {
if (str) {
obj.textContent = str;
} else{
return obj.textContent;
}
};
}; //调用函数
var ele = document.getElementById('pack-function'),
_getText = document.getElementById('get-text'),
_setText = document.getElementById('set-text');
_getText.onclick = function (){
var result = setText(ele);
alert(result);
} _setText.onclick = function(){
setText(ele, 'hello world!');
}
</script>
？