(转)innerHTML、innerText和outerHTML、outerText的区别
原文:http://walsh.iteye.com/blog/261966
innerHTML、innerText和outerHTML、outerText的区别 博客分类:
- innerHTML 设置或获取位于对象起始和结束标签内的 HTML
- outerHTML 设置或获取对象及其内容的 HTML 形式
- innerText 设置或获取位于对象起始和结束标签内的文本
- outerText 设置(包括标签)或获取(不包括标签)对象的文本
innerText和outerText在获取时是相同效果,但在设置时,innerText仅设置标签内的文本,而outerText设置包括标签在内的文本。
2、示例代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>innerHTML、outerHTML和innerText、outerHTML的区别</title>
- <script language="JavaScript" type="text/javascript">
- //.innerHTML
- function innerHTMLDemo()
- {
- test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
- }
- //.innerText
- function innerTextDemo()
- {
- test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
- }
- //.outerHTML
- function outerHTMLDemo()
- {
- test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
- }
- //.outerText
- function outerTextDemo()
- {
- test_id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
- }
- </script>
- </head>
- <body>
- <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>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML和innerText、outerHTML的区别</title>
<script language="JavaScript" type="text/javascript">
//.innerHTML
function innerHTMLDemo()
{
test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
}
//.innerText
function innerTextDemo()
{
test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
}
//.outerHTML
function outerHTMLDemo()
{
test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
}
//.outerText
function outerTextDemo()
{
test_id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
}
</script>
</head>
<body>
<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>
</html>
3、不同之处: 简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于:

(转)innerHTML、innerText和outerHTML、outerText的区别的更多相关文章
- innerHTML innerText与outerHTML间的区别
innerHTML与innerText及outerHTML间的区别最容易使初学者搞混淆,为了更好的使读者区分开.下面我就通过一个demo来解释: 代码: <!DOCTYPE html>&l ...
- javaScript中innerHTML,innerText,outerHTML,outerText的区别
开头说下innerText和outerText只在chrome浏览器中有效 定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,包括标签. 来看代码 <!DOC ...
- js 中innerHTML,innerText,outerHTML,outerText的区别
开头说下innerText和outerText只在chrome浏览器中有效 定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,包括标签. 来看代码 <!DOC ...
- innerHTML, innerText, outerHTML, outerText的区别
innerHTML:返回标签内部嵌套的子元素的所有html标签+文本内容content. innerText:返回标签内部嵌套的子元素的文本内容content. outerHTML:返回标签本身+嵌套 ...
- 【JavaScript】innerHTML、innerText和outerHTML的用法区别
用法: <div id="test"> <span style="color:red">test1</span> tes ...
- innerHTML,innerText,textContent,outerHTML的用法以及区别
innerHTML获取的是对象起始的位置到终止位置全部内容,包含html标签. innerText和textContent结果是一样的,不包含标签,直接获取标签内的内容,区别是两者浏览器的兼容性. o ...
- 测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别
测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别 我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...
- innerHTML、innerText和outerHTML、outerText的区别
区别描述如下: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...
- innerHTML、outerHTML、innerText、outerText的区别及兼容性问题
今天看了很多文章关于innerHTML.outerHTML.innerText.outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都 ...
随机推荐
- as的Enter_Frame与Timer
As3中的Timer和Event.EnterFrame是有明显的区别的. Evnet.EnterFrame是定时间隔多少时间出发.如果执行时间比间隔时间长,则会间隔执行时间这么久. 举个例子: Fla ...
- VMware Workstation 12 Pro虚拟机下载(含序列号)
VMware Workstation 12 Pro 官网下载地址:http://www.vmware.com/products/workstation/workstation-evaluation V ...
- [hadoop] 集群启动和内存调优
1.启动Hadoop集群 #首先查看下zoo.cfg里面配置的server.id和集群主机的id是否一致 #如果不一致会造成yarn控制不了从节点的启动 cat /home/hadoop/zookee ...
- Android客户端向服务器端发送数据的流程(1)
原理: android客户端通过使用org.apache.http.impl.client.DefaultHttpClient类来发送数据; 方法介绍: HttpClient是android中提供的一 ...
- hdu----149850 years, 50 colors(最小覆盖点)
50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- Java 集合系列 14 hashCode
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
- MASM6.15汇编程序例子
/***************通过调用(INT 21H)表中的01h号功能号从键盘输入一个字符并回显到视频显示器上*****************/ DATAS SEGMENT ;此处输入数据段代 ...
- 5月21日 CSS样式表加阴影
HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- javascript 判断身份证的正确性
function isIdCardNo(vals) { var cardNum = vals; if (cardNum.length == 0) { return true; } // 11-15,2 ...
- svn 备份后双机同步热备失效,提示 W200007 target server does not support atomic revision property edits svynsync:E170009
svn 备份后双机同步热备失效,提示 W200007 target server does not support atomic revision property edits; consider u ...