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

一:动态改变文本和Html

Demo1

p {
color:gray;
}

function changeText()
{
//innerText属性只能改变HTML内的文本内容,并且支持IE下使用
DT.innerText="我很好";
}
function changeHtml()
{
//innerHTML符合W3C标准,可以在任何浏览器下使用,并且可以改变独享DH内部的HTML语句
DH.innerHTML="我姓肖";
//火狐下只支持以下写法,并不支持在Javascript脚本中直接使用对象名来操作对象
//document.getElementById("DH").innerHTML="我姓肖";
}
function back()
{
DT.innerText="你好吗?";
DH.innerHTML="你姓啥?";
}

请点击下边的文字.....

  • 你好吗?
  • 你姓啥?
  • 恢复原样

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

innerText属性用来定义对象所要输出的文本,在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”(语句DT.innerText="我很好!")。而对对象DH的改变用了innerHTML属性,它除了有innerText的作用外,还可改变对象DH内部的HTML语句,于是它把文本变成了“我姓肖!”,而且文本输出改成了斜体(<i></i>)并下加一条直线(<u></u>),即语句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有类似的作用,读者不妨自己试试看。

二:文本的动态输入与输出

Demo2

p {
color:gray;
}
body {
font-family:宋体;
color:blue;
font-size:9pt;
}
.blue {
color:blue;
font-size:9pt;
}

function OutputText(){
var txt=document.getElementById("txt").value;
if(txt!=""){
output.innerHTML="在此输出文本:"+txt+""
}else{
output.innerHTML="在此输出文本:";
}
}

请输入文本框中输入文字:

在此输出文本:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

此例的效果是先在文本框中输入文本,然后按“输出文本”的按钮,接着网页便会自动输出您所输入的文本
三:注意innerHTML有自动检查语法的功能,它会把不完整的HTML代码补充完整,这点可以说是神奇,例如下面的这段脚本

Demo3

function Get(){
var tab=document.getElementById("tab")
tab.innerHTML="

";
alert(tab.innerHTML);
}

请点我啦!!!

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

运行的效果竟然是这样的:
<TABLE><TBODY><TR></TR></TBODY></TABLE>
如图:

所以请各位在使用时一定要小心.
例如在做这样的操作时就会出错.


代码如下:

list.innerHTML="<table><tr>";
list.innerHTML+="<td>"

必须用一个中间变量
Html代码


代码如下:

var html="<table><tr>";
html+="<td>";
list.innerHTML=html;
var html="<table><tr>";
html+="<td>";
list.innerHTML=html;

这样问题就可以得到解决.
另外:
innerText在火狐下是不支持的,在网上有这种有人这么做
innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用 innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

(0)

相关推荐

  • 关于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和textContent对比及使用介绍

    今天在使用innerText时遇到一个兼容性问题,FireFox不支持innerText方法,查了下MDN,发现FireFox下有个类似的方法,叫textContent,它和IE的innerText类似, 都是用来获取(设置)元素中text的方法. 语法 •设置 复制代码 代码如下: element.textContent = "text"; •获取 复制代码 代码如下: var text = element.textContent; 复制代码 代码如下: Note: textCont

  • 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

  • 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

  • 让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

  • 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="我姓肖"; //火狐下只支持以下写法,并不支持在

  • javascript中innerText和innerHTML属性用法实例分析

    本文实例讲述了javascript中innerText和innerHTML属性用法.分享给大家供大家参考.具体分析如下: 几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内 的文本表示形式和HTML源代码,这两个属性是可读可写的 innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建 <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • iframe 的用法与注意事项

    本文主要来讲述一下 iframe 的用法与注意事项:     好多同志对 iframe 是如何控制的,并不是十分了解,基本上还处于一个模糊的认识状态. 注意两个事项,ifr 是一个以存在的 iframe 的 ID 和 NAME 值:     document.getElementById("ifr");     window.frames["ifr"]; 要想使用iframe内的函数,变量就必须通过第二种方法.因为它取的是一个完整的DOM模型(不知道这样说对不对

  • PHP中header函数的用法及其注意事项详解

    void header ( string $string [, bool $replace = true [, int $http_response_code ]] ) : Send a raw HTTP header 下面有一些使用header的几种用法: 1.使用header函数进行跳转页面: header('Location:'.$url); 其中$url就是将要跳转的url了. 这种用法的注意事项有以下几点: •Location和":"之间不能有空格,否则会出现错误(注释:我刚

  • 浅谈c语言中转义字符的用法及注意事项

    c语言中的转义字符: \a 响铃符 \b 退格 \f 换页符 \n 换行符 \r 回车符(回到该行的首位置) \v 纵向制表符 \\ 反斜杠 \? 问号(?经vs10测试可以直接打印) \"(\') 双引号(单引号) \ooo 八进制数(ooo表示一个用8进制数表示出来的对应ANSII代码对应出字符,用此方法可以表示出所有ASCII字符.不过测试发现打不出%号,存疑!) \xhh 十六进制数(功能同八进制数,用hh表示一个十六进制数,如\x20表示空格) 注:使用转义字符的退格符,换行符,回车符

  • Python基础学习之类与实例基本用法与注意事项详解

    本文实例讲述了Python基础学习之类与实例基本用法与注意事项.分享给大家供大家参考,具体如下: 前言 和其他编程语言相比,Python用非常少的新语法和语义将类加入到语言中.Python的类提供了面向对象编程的所有标准特性:类继承机制允许多个基类,派生类可以覆盖它基类的任何方法,一个方法可以调用基类中相同名称的的方法.对象可以包含任意数量和类型的数据.和模块一样,类也拥有Python天然的动态特性:它们在运行时创建,可以在创建后修改. Python的类 Python类实例时,先调用__new_

  • php array_chunk()函数用法与注意事项

    本文实例讲述了php array_chunk()函数用法与注意事项.分享给大家供大家参考,具体如下: 定义和用法 array_chunk() 函数把数组分割为新的数组块. 其中每个数组的单元数目由 size 参数决定.最后一个数组的单元数目可能会少几个. 可选参数 preserve_key 是一个布尔值(默认false),它指定新数组的元素是否有和原数组相同的键(用于关联数组),还是从 0 开始的新数字键(用于索引数组).默认是分配新的键. 例如: $arr = [1,2,3,4,5,6,7,8

  • php设计模式之适配器模式原理、用法及注意事项详解

    本文实例讲述了php设计模式之适配器模式原理.用法及注意事项.分享给大家供大家参考,具体如下: 在这个有没有对象都要高呼"面向对象"的年代,掌握面向对象会给我们带来意想不到的方便.学编程的小伙伴从开始能写几行代码实现简单功能到后来懂得将一些重复的操作组合起来形成一个"函数",再到后来将"函数"和属性组合起来形成一个"类".一步步走来,我们在考虑着机器运行代码效率的提高的同时也在考虑减轻程序员的工作量. 那么我们今天讲到的适配器

  • python中os.remove()用法及注意事项

    计算机一般来说是需要定期的清理,系统的内存不能无限延伸,同时有一些不需要的文件也可以得以清除掉.有些人会使用os.remove来进行文件的清楚,从而导致一些错误的出现,可以说这是对于os.remove的用法还没有熟练掌握.下面我们就os.remove的详细用法及使用注意分别介绍. 1.语法 os.remove(path) 2.参数 path -- 要移除的文件路径 3.返回值 该方法没有返回值 4.使用注意 (1)不能用来删除文件夹,否则拒绝访问. # -*- coding:utf-8 -*-

  • python析构函数用法及注意事项

    1.主动删除对象调用del 对象;程序运行结束后,python也会自动进行删除其他的对象. class Animal: def __del__(self): print("销毁对象{0}".format(self)) cat = Animal() cat2 = Animal() del cat2 print("程序结束") 2.如果重写子类的del方法,则必须显式调用父类的del方法,这样才能保证在回收子类对象时,其占用的资源(可能包含继承自父类的部分资源)能被彻底

随机推荐