您的位置：首页 > Web前端 > HTML

Doc12(innerText与innerHTML及兼容性写法)

2016-01-28 13:19 435 查看

innerText和innerHTML的区别

innerText

翻译:纯文本.

只显示文本内容.

innerHTML

翻译:元素代码

显示的是文本和标签,可以直接设置效果.

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type='text/javascript'>
onload=function(){
document.getElementById('btnText').onclick=function(){
alert(document.getElementById('dv').innerText);
//只显示文本内容
};   document.getElementById("btnHTML").onclick=function(){
alert(document.getElementById('dv').innerHTML);
//显示的是文本和标签
};
//设置文本内容
document.getElementById('btnText1').onclick=function(){
document.getElementById('dv').innerText='我不爱天安门text,立马警察叔叔来抓人啦';
};
//设置文本和标签,设置的是效果
document.getElementById('btnHTML1').onclick=f
4000
unction(){
document.getElementById('dv').innerHTML='<font color="blue">我不爱天安门html</font>';
};
};
</script>
</head>
<body>
<input type='button' name='name' value='显示innerText' id='btnText'/>
<input type='button' name='name' value='显示innerHTML' id='btnHTML'/>
<input type='button' name='name' value='赋值innerText' id='btnText1'/>
<input type='button' name='name' value='赋值innerHTML' id='btnHTML1'/>
<div id='dv' style='width:300ox;height:200px;border:1px solid yellow'>
<font face='全新硬笔行书简' size='7' color='red'> 我爱天安门</font>
</div>
</body>
</html>

知识点:在单引号内还需要引号则需要双引号.

知识点:在font标签内,face设置字体样式,size设置字体大小,color设置字体颜色.

火狐兼容性写法

注意点:在火狐浏览器中,不支持innerText属性,火狐中使用textContent属性,

或者直接使用innerHTML设置文本.在这里如果需要判断兼容性的话,可以判断innerText属性类型是否

为字符串类型.以下为能力检测的写法.比较兼容火狐浏览器.

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type='text/javascript'>
onload=function(){
if(typeof(document.getElementById('dv').innerText)=='string'){
document.getElementById('dv').innerText='<strong>哈哈</strong>';
}else{//火狐中不支持innerText 使用的是textContent.通过这一点判断是否为IE浏览器
document.getElementById('dv').textContent='<strong>哈哈</strong>';
}
};
</script>
</head>
<body>
<div id='dv'>
</div>
</body>
</html>

知识点:推荐使用strong标签设置粗体.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航