innerHTML与innerText的PK
一、innerText属性用来定义对象所要输出的文本，在本例中innerText把对象it中的文本“您喜欢看微微一笑很倾城吗？”变成了“超级喜欢！”（语句it.innerText="超级喜欢！"）。而对对象ih的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象ih内部的HTML语句，于是它把文本变成了“肖奈!”，而且文本输出改成了斜体（<i></i>）并加粗（<b></b>），即语句ih.innerHTML="<i><b>肖奈!</b></i>"。
<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.itd">
<html>
<head>
<meta charset="UTF-8">
<title>innerText和innerHTML用法实例</title>
</head>
<body>
<p><span style="color:red;">请点击下边的文字……</span>
<ul>
<li id="it" onclick="changeText()">您喜欢看微微一笑很倾城吗? </li>
<li id="ih" onclick="changeHtml()">您叫什么名字? </li>
<li onclick="back()">恢复原样! </li>
</ul>
</body>
<script type="text/javascript">
function changeText() {
it.innerText="超级喜欢!";
}//function
function changeHtml() {
ih.innerHTML="<i><b>肖奈!</b></i>";
}//function
function back() {
it.innerText="您喜欢看微微一笑很倾城吗? ";
ih.innerHTML="您叫什么名字?";
}
</script>
</html>
二、下例的效果是先在文本框中输入文本，然后按“输出文本”的按钮，接着网页便会自动输出您所输入的文本
<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.itd">
<html>
<head>
<meta charset="UTF-8">
<title>用innerText和innerHTML制作动态网页</title>
</head>
<body>
<form name="frm">
<p>
<span style="color:red;">请在文本框中输入文字:</span><br/><br/>
<label>第一个文本框:</label><input type="text" name="txt" size=""/><br/><br/>
<label>第二个文本框:</label> <input type="text" name="txt2" size=""/>
<br><br/>
<input type="button" value="输出two文本" name="B1" style="color:blue;" onclick="OutputText()">
</p>
</form>
<p id="Output">
在此处输出文本：
</p>
</body>
<script type="text/javascript">
function OutputText() {
if(frm.txt2.text!="") {
Output.innerHTML="在此处输出文本：<b>"+frm.txt2.value+"</b>";} //Output为一对象。
else {
Output.innerText="在此处输出文本：";}
// if(frm.txt2!="") {
// Output.innerHTML="在此处输出文本：<b>"+frm.txt2.value+"</b>";} //Output为一对象。
// else {
// Output.innerText="在此处输出文本：";}
// if(frm.txt2.value!="") {
// Output.innerHTML="在此处输出文本：<b>"+frm.txt2.value+"</b>";} //Output为一对象。
// else {
// Output.innerText="在此处输出文本：";}
}
</script>
</html>
总结：
innerText和innerHTML获取元素的内容。如果元素只包含文本，那么innerText和innerHTML返回相同的值。但是，如果同时包含文本和其他元素，innerText将只返回文本的表示，而innerHTML，将返回所有元素和文本的HTML代码。下面的表格列出了根据特定代码innerText和innerHTML返回的不同值。
| 代码 | innerText | innerHTML |
| <div>Hello world</div> | "Hello world" | "Hello world" |
| <div><b>Hello</b>world</div> | "Hello world" | "<b>Hello</b>world" |
| <div><span></span></div> | "" | "<span></span>" |
最后，通过将innerText赋值给它自身，表示从指定的元素中删除所有的HTML标签。
oDiv.innerText = oDiv.innerText;
补充：innerText、innerHTML、outText、outHTML终极PK
一、功能介绍：
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
二、示例参考
<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.itd">
<html>
<head>
<meta charset="UTF-8">
<title>innerText、innerHTML、outText、outHTML</title>
</head>
<body>
<p style="color:lawngreen;" >请点击下面列表变身：</p>
<ul>
<li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>
<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>
</ul>
</body>
<script language="JavaScript">
//.innerHTML
function innerHTMLDemo() {
test_id1.innerHTML="<i><b>设置或获取位于对象起始和结束标签内的 HTML.</b></i>";
}
//.innerText
function innerTextDemo() {
test_id2.innerText="<i><b>设置或获取位于对象起始和结束标签内的文本.</b></i>";
}
//.outerHTML
function outerHTMLDemo() {
test_id3.outerHTML="<i><b>设置或获取对象及其内容的 HTML 形式.</b></i>";
}
//.outerText
function outerTextDemo() {
test_id4.outerText="<i><b>设置(包括标签)或获取(不包括标签)对象的文本.</b></i>";
}
</script>
</html>
运行效果：
三、不同之处:
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：
1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。 
特别说明：
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。
innerHTML与innerText的PK的更多相关文章
- innerHTML与innerText的异同
在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...
- JS中innerHTML，innerText，value
一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a" ...
- JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性
一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...
- JS中innerHTML 和innerText和value的区别
(1)innerHTML 和innerText和value的区别: innerHTML innerText是对非表单元素进行操作的. value是对表单元素进行操作的. (2)innerHTML 和i ...
- (转)JS中innerHTML，innerText，value
原文:http://holysonll.blog.163.com/blog/static/21413909320134111054352/ JS中innerHTML,innerText,value 2 ...
- (转)innerHTML、innerText和outerHTML、outerText的区别
原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别 博客分类: CSS/ ...
- innerHTML和innerText
document 对象中有innerHTML和innerText 两个属性, 这两个属性都是获取document对象的文本内容的,这两个属性间有哪些区别呢?通过几个例子来看一下. 示例1 <ht ...
- textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别
今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...
- 测试开发技术：DOM中 innerHTML、innerText、outerHTML、outerText的区别
测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别 我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...
随机推荐
- （剑指Offer）面试题22：栈的压入、弹出序列
题目: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等. 例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序 ...
- php涉及数据库操作时响应很慢。
症状描述: 网站是php开发的,大部分页面响应很慢. 本地开发时响应速度很快,但是部署到生产环境后大部分响应很慢. 通过谷歌浏览调试发现PHP页面加载很慢,有个别的php请求的响应时间甚至超过10秒, ...
- 有关获取session属性时报nullPointException（空指针异常）的解决方案
一般我们在从session中获取数据时,需要先进行赋值,也就是必须先进行session.setAttribute(String,Object)方法进行赋值,然后我们才能从session中获取内容,但是 ...
- oracle 查詢表字段明細、字段注釋、表註釋
查詢表字段明細 select column_name,data_type,data_length,DATA_PRECISION ,DATA_SCALE from all_tab_columns wh ...
- Eclipse设置选中高亮显示（包含debug）
如果不高亮显示了:工具栏里有个黄色小笔的图标,点一下就可以了,或者alt+shift+O 设置高亮显示:
- 手游产品经理初探（六）粗糙的logo会给产品致命一击
假设你的游戏产品从logo的设计開始就不注重细节的话,那么你的产品将不会走多远! 我们把图片放大看: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1 ...
- 将博CMS安全分析报告-橘皮书
一.使用IBM的AppScan和Acunetix应用程序漏洞扫描将博CMS5.5,得出一些漏洞. 此番扫描大小共23种类型问题,其中高危漏洞有三个,中危漏洞9个,低级漏洞11个.注意这 ...
- Ajax 无刷新在注册用户名时的应用的代码
var xmlHttp; uName() //用户名失去焦点时 { if(all.uname.=="") { all.l1.innerHTML="不能为空!"; ...
- uoj #5. 【NOI2014】动物园 kmp
#5. [NOI2014]动物园 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/5 Description 近日 ...
- 【JavaScript】新浪微博ajax请求后改变地址栏url，但页面不跳转的方案解析
新浪微博当你弹出一个视频的时候再点下一页时,原视频还在,而且地址栏的url的页数变了.对于这种网上讨论最多的方案有以下几种: 一.通过锚点Hash实现在这方面其实国内很早就有做了,比如淘宝画报,通过的 ...