innerText和innerHTML 一些问题分析
其中innerText特性用来修改起始标签和结束标签之间的文本的。例如,假设有个空的<div/>元素,希望将其变成<div>New text for the div.</div>。用DOM实现时,要这么做:
oDiv.appendChild(document.createTextNode("New text for the div."));
这段代码并不难读,但是很冗长。如果使用innerText,只要这么做:
oDiv.innerText = "New text for the div.";
使用innerText,代码更加简洁,并且更容易理解。另外,innerText会自动将小于号、大于号、引号和&符号进行HTML编码,所有是毫不需当心特殊字符:
oDiv.innerText = "New text for the <div/>.";
这一行代码的执行结果是<div>New text for the <div/>.</div>。但如何一定要再元素中包含HTML标签呢?这就是innerHTML所要解决的问题。
应用innerHTML特性,可以直接给元素分配HTML字符串,而不需考虑使用DOM方法来创建元素。例如,假设一个空<div/>要变成<div><strong>Hello</strong><em>World</em></div>。使用DOM,要用下面的代码:
var oStrong = document.createElement("strong');
oStrong.appendChild(document.createTextNode("hello"));
var oEm = document.createElement("em");
oEm.appendChild(document.createTextNode("World"));
oDiv.appendChild(oStrong);
oDiv.appendChild(document.createTextNode(""));
oDiv.appendChild(oEm);
而使用innerHTML,代码就变成:
oDiv.innerHTML = "<strong>Hello</strong><em>World</em>";
七行代码一下就变成一行,这就是innerHML的威力!
还可以使用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>" |
oDiv.innerText = oDiv.innerText;
相关推荐
-
innerText和textContent对比及使用介绍
今天在使用innerText时遇到一个兼容性问题,FireFox不支持innerText方法,查了下MDN,发现FireFox下有个类似的方法,叫textContent,它和IE的innerText类似, 都是用来获取(设置)元素中text的方法. 语法 •设置 复制代码 代码如下: element.textContent = "text"; •获取 复制代码 代码如下: var text = element.textContent; 复制代码 代码如下: Note: textCont
-
关于Mozilla浏览器不支持innerText的解决办法
比如: <p id="test"><strong><font color="red">Hello</font> , world!</strong></p> 我们使用代码:alert((document.getElementById("test")).innerText) 在IE.Chrome中,均能获取到"Hello , world!",但是在Firefo
-
让innerText在firefox火狐和IE浏览器都能用的写法
IE中的获取文本方法innerText在firefox中不支持 firefox改成了textContent方法/属性 并且在Firefox中文本中间的空白自符被无情的替换没了 使用起来异常不方便 现在好了,用Javascript重新定义了innerText方法 使得在Firefox中也可以使用innerText方法 并且此方法解决了firefox中空白字符的问题 使用方法: 将下面的脚本放在页面内 不管ie还是firefox都可以使用obj.innerText提取文本了 复制代码 代码如下: <
-
javascript innerText和innerHtml应用
看看代码 <head runat="server"> <title>无标题页</title> <script language="javascript"> function ok(){ var txt=new Array(); txt.push("<strong>"); txt.push(&quo
-
InnerHtml和InnerText的区别分析
最详细的解答可以参见MSDN InnerTexthttp://msdn.microsoft.com/zh-cn/library/system.web.ui.htmlcontrols.htmlcontainercontrol.innertext.aspx InnerHtmlhttp://msdn.microsoft.com/zh-cn/library/system.web.ui.htmlcontrols.htmlcontainercontrol.innerhtml.aspx 简要解释: Inner
-
textContent在Firefox下与innerText等效的属性
在IE和Opear下,DOM对象支持innerText属性,可以很方便的去除HTML标签. 但在Firefox不支持该属性,好在FF下的DOM对象支持textContent,该属性与innerText等效. 演示实例: <p id="TestObj">Hi,I'm <strong>cnlei</strong>.Welcome to my homepage:<a href="http://www.cnlei.com">h
-
javascript textContent与innerText的异同分析
textContent与innerText的不同 IE下有个innerText属性,FF下有个textContent属性.很多以前给IE写脚本的,在FF下找不到innerText属性,于是网上搜到的建议是用textContent来替代.反之给FF写脚本的也一样. 但是实际上,这里有个误解.网上很多文章说"FF下等效于innerText属性的属性是textContent"----但是事实上并非如此.innerText与textContent有几点很重要的不同,导致它们在一些情况下不能直接
-
innerText innerHTML的用法以及注意事项 [推荐]
一:动态改变文本和Html Demo1 p { color:gray; } function changeText() { //innerText属性只能改变HTML内的文本内容,并且支持IE下使用 DT.innerText="我很好"; } function changeHtml() { //innerHTML符合W3C标准,可以在任何浏览器下使用,并且可以改变独享DH内部的HTML语句 DH.innerHTML="我姓肖"; //火狐下只支持以下写法,并不支持在
-
innerText和innerHTML 一些问题分析
其中innerText特性用来修改起始标签和结束标签之间的文本的.例如,假设有个空的<div/>元素,希望将其变成<div>New text for the div.</div>.用DOM实现时,要这么做: oDiv.appendChild(document.createTextNode("New text for the div.")); 这段代码并不难读,但是很冗长.如果使用innerText,只要这么做: oDiv.innerText = &q
-
javascript中innerText和innerHTML属性用法实例分析
本文实例讲述了javascript中innerText和innerHTML属性用法.分享给大家供大家参考.具体分析如下: 几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内 的文本表示形式和HTML源代码,这两个属性是可读可写的 innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建 <html xmlns="http://www.w3.org/1999/xhtml"> <head>
-
Javascript中innerHTML用法实例分析
本文实例讲述了Javascript中innerHTML用法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){ var cont = document.getElementById('container'); var htmlcode = "<p>哈哈哈哈</p>";
-
IE6与IE7中,innerHTML获取param的区别
代码: 复制代码 代码如下: <html> <head> <script type="text/javascript"><!-- function setMode(newMode) { var text1=document.getElementById("text1"); var cont; bTextMode = newMode; if (bTextMode) { cont=text1.innerHTML; text1.i
-
IE和Mozilla的兼容性汇总event
1,关于event的用法 存在问题:IE中可以直接使用event对象,但是Mozilla不可以直接使用. 例如: <input type="button" value="clickMe" nclick="doIt()"> <script. language="javascript"> function doIt(){ alert(event); } </script> 这段代码在Mozill
-
IE和firefox浏览器的event事件兼容性汇总
1,关于event的用法 存在问题:IE中可以直接使用event对象,但是Mozilla不可以直接使用. 例如: <input type="button" value="clickMe" nclick="doIt()"> <script. language="javascript"> function doIt(){ alert(event); } </script> 这段代码在Mozill
-
hta编写的消费记录程序
将代码复制粘贴到一文本文档中,然后保存,并将该文件后缀名改为:hta,双击即可运行. 复制代码 代码如下: <!--////////程序说明/////////==== 程序名称:消费记录Ver1.1(20070808-20070811).hta 使用说明:将代码复制粘贴到一文本文档中,然后保存,并将该文件后缀名改为:hta,双击即可运行. 作者说明:youxi01,,,版权没有,欢迎盗版!!///////////--> <!--///////设置题头,编码方式//////--> &
-
winXP下用VBS写的代码编辑器
这几天不能访问的时候把硬盘上的东东复习了一遍,找出了这个东西出来,由于水平有限,而且对DHTML没有什么研究,所以做得很是粗糙,贴上来是为了抛砖引玉,希望有高人能帮忙修改或拿出更优秀的东东出来. 测试环境为windows XP 专业版 SP2,暂时发现代码着色方面有Bug,虽然已有解决方法,不过由于代码量的原因(用记事本写代码真的很恼火),暂时未纠正,另外预计将来加入自动完成等功能. ps:利用VBS脚本+DHTML,主要功能由正则表达式+wmic来完成,代码需保存为HTA类型的文件,当然也可以
-
jQuery 1.0.2
复制代码 代码如下: /* prevent execution of jQuery if included more then once */ if(typeof window.jQuery == "undefined") { /* * jQuery 1.0.2 - New Wave Javascript * * Copyright (c) 2006 John Resig (jquery.com) * Dual licensed under the MIT (MIT-LICEN
随机推荐
- 分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
- Lua中的元方法__newindex详解
- Spring Boot使用Druid进行维度的统计和监控
- 详解Spring Boot中Controller用法
- 12个非常实用的JavaScript小技巧【推荐】
- JS正则表达式获取字符串中特定字符的方法
- Android切换卡TabWidget用法示例
- JS实现登录页面记住密码和enter键登录方法推荐
- node.js require() 源码解读
- Javascript之文件操作
- MIME类型大全(response.setContentType中MIME参数类型总结)
- JavaScript常用函数工具集:lao-utils
- js获取域名的方法
- c# 配置文件App.config操作类库的方法
- java JOptionPane类的介绍
- C语言中qsort函数用法实例小结
- mysql语句实现简单的增、删、改、查操作示例
- Java I/O深入学习之File和RandomAccessFile
- python实现多层感知器
- Mysql事务隔离级别之读提交详解