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>"
后，通过将innerText赋值给它自身，表示从指定的元素中删除所有的HTML标签。
oDiv.innerText = oDiv.innerText;

赞 (0)

相关推荐

  • 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

  • 让innerText在firefox火狐和IE浏览器都能用的写法

    IE中的获取文本方法innerText在firefox中不支持 firefox改成了textContent方法/属性 并且在Firefox中文本中间的空白自符被无情的替换没了 使用起来异常不方便 现在好了,用Javascript重新定义了innerText方法 使得在Firefox中也可以使用innerText方法 并且此方法解决了firefox中空白字符的问题 使用方法: 将下面的脚本放在页面内 不管ie还是firefox都可以使用obj.innerText提取文本了 复制代码 代码如下: <

  • javascript innerText和innerHtml应用

    javascript innerText和innerHtml应用

    看看代码 <head runat="server">    <title>无标题页</title>    <script language="javascript">        function ok(){            var txt=new Array();            txt.push("<strong>");            txt.push(&quo

  • 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

  • javascript textContent与innerText的异同分析

    textContent与innerText的不同 IE下有个innerText属性,FF下有个textContent属性.很多以前给IE写脚本的,在FF下找不到innerText属性,于是网上搜到的建议是用textContent来替代.反之给FF写脚本的也一样. 但是实际上,这里有个误解.网上很多文章说"FF下等效于innerText属性的属性是textContent"----但是事实上并非如此.innerText与textContent有几点很重要的不同,导致它们在一些情况下不能直接

  • 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

  • innerText innerHTML的用法以及注意事项 [推荐]

    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的区别

    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

随机推荐