javascript innerHTML、outerHTML、innerText、outerText的区别
1、功能讲解:
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
2、示例
<html>
<head>
<title>Demo</title>
<style><!--
body {font-family:"宋体";color="blue";font-size="9pt"}
--> </style>
<script language="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="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>";
}
//.outerText
function outerTextDemo()
{
test_id4.outerText="<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的不同之处在于:
1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。
2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。
特别说明:
innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
javascript innerHTML、outerHTML、innerText、outerText的区别的更多相关文章
- innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法
在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...
- innerHTML/outerHTML; innerText/outerText; textContent
innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/A ...
- (转)innerHTML、innerText和outerHTML、outerText的区别
原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别 博客分类: CSS/ ...
- 测试开发技术: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
迁移时间--2017年10月31日14:52:59 Author:Marydon UpdateTime--2017年1月15日20:33:03innerHTML,outerHTML与innerTe ...
- innerHTML、innerText、outerHTML、outerText的区别
我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHT ...
- outerHTML、innerHTML以及innerText三者的区别
- value,innerHTML,innerText之间的区别
value:是DOM对象的属性.主要用于获取单标签的属性,(针对单标签): innerHEML:用于获取闭合双标签里面的内容,(可以识别标签): innerText:用于获取闭合单标签里面的内容,(不 ...
- JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用
value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...
随机推荐
- Recovery和Charger模式下屏幕旋转180度[转]
如何让Recovery (系统固件升级),charger(关机充电动画)时屏幕旋转180度 解决方法: 1.在bootable\recovery\minui\Graphics.c 文件找到gr_fli ...
- GNU project C
gcc - GNU project C and C++ compiler gcc [option] file... preprocessing compila ...
- Unity3d ngui基础教程
Unity3d ngui基础教程 NGUI教程:步骤1-Scene 1.创建一个新的场景(New Scene).2.选择并删除场景里的MainCamera.3.在NGUI菜单下选择Create a N ...
- Count The Carries
hdu:http://acm.hdu.edu.cn/showproblem.php?pid=4588 题意:给你 a,b两个数,然后让a到b之间的数做2进制的加法,问你与多少次进位.例如:1,3,1+ ...
- 【HDOJ】2451 Simple Addition Expression
递推,但是要注意细节.题目的意思,就是求s(x) = i+(i+1)+(i+2),i<n.该表达中计算过程中CA恒为0(包括中间值)的情况.根据所求可推得.1-10: 31-100: 3*41- ...
- 【宽搜】ECNA 2015 D Rings (Codeforces GYM 100825)
题目链接: http://codeforces.com/gym/100825 题目大意: 给你一张N*N(N<=100)的图表示一个树桩,'T'为年轮,'.'为空,求每个'T'属于哪一圈年轮,空 ...
- Divide Two Integers —— LeetCode
Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...
- RabbitMQ-死信(Dead Letter)
对于有异常的消息我们可以有如下做法: 记录下来再ack. nack或者reject,同时将requeue设为false. 在第2条的基础上增加死信(Dead Letter). 上边的第3个做法可以 ...
- js 魔鬼训练
1.Object.assign 偷梁换柱 / 融合 - 将多个对象合并到第一个对象中去.这样一来methods对象中就包含着data对象了.否则this无法正常访问data中的title var ne ...
- 【repost】如何学好编程 (精挑细选编程教程,帮助现在在校学生学好编程,让你门找到编程的方向)四个方法总有一个学好编程的方法适合你
方法(一)编了这么久的程序,一直想找机会总结下其中的心得和方法,但回想我这段编程道路,又很难说清楚,如果按照我走过的所有路来说,显然是不可能的!当我看完了云风的<游戏之旅--编程感悟>和梁 ...