实现Web页面内容动态改变的dhtml操作

原创 2004年02月01日 22:53:00

IEDHTML对象提供了四个可读写的属性来动态操作页面元素的内容:innerText, outerText, innerHTML, outerHTML.<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

需注意两点:

1.     其中innerText,outerText属性的值是作为普通文本呈现的,即使它含有HTML标签也如实反应出来;而innerHTML, outerHTML呈现的是经HTML引擎解析后文本,它可以反应属性中HTML标签的表现效果。

2.     对对象的outerTextouterHTML属性赋值(即写操作)会删除该对象。

 

 

以上四个属性的赋值操作只是替换原对象的文本内容,想要在页面中指定元素相关位置新增文本内容,需采用insertAdjacentHTMLinsertAdjacentText方法。形式如下:

其中 sWhere 表示插入的文本相对于html标签的位置,有如下四个预设值:

beforeBeginafterBeginbeforeEndafterEnd

使用中需注意如下几点:

1.这两种方法必须在整个文档装载完成之后才能使用,否则将出错。

2. InsertAdjacentText只能插入普通文本,InsertAdjacentHTML插入html格式的文本

3. InsertAdjacentHTML插入脚本,必须在script元素中使用defer属性,否则脚本执行将出现运行期错误

4.InsertAdjacentHTML插入html元素后,all以及其他可能的元素集合将自动更新以反应动态变化。如页面后续元素的sourceIndex 属性将改变。

5.当赋予InsertHTML/outerHTML属性无效的HTML标签,该方法可能出现运行时错。如以下代码将出错:

   <BODY>

      <p id=pdiv></p>

      <SCRIPT LANGUAGE="JavaScript">

           pdiv.innerHTML = "<p>hello</p>"

      </SCRIPT>

      </BODY>

 

 

 

此外页面内容动态操作还需要注意如下一些细节:

1.只有文档BODY内显示的内容能被以上属性和方法动态改变,BODY对象的内容能被动态操作,但BODY对象本身无法被替换。

2.以上属性和方式不能操作空标签(没有内容的html标签),如input,img

3.对于table对象而言,只有tdinnerHTML/innerText)和tableouterHMTL/outerText)对象可以用某些属性来替换或插入内容;而其他table对象,如trtbody不能用这些属性来改变内容。

 

翻译整理自MSDN,原名About Dynamic Content

Web浏览器中动态添加修改HTML页面代码的问题分析

引言:在Web的世界里,浏览器加载页面,展示给用户最终的内容,可是最终展示的HTML代码与服务器上存储的代码一致吗?...
  • blueheart20
  • blueheart20
  • 2017年04月20日 23:44
  • 2434

实现Web页面内容动态改变的dhtml操作http://www.knowsky.com/4074.html

 IE的DHTML对象提供了四个可读写的属性来动态操作页面元素的内容:innerText, outerText, innerHTML, outerHTML.需注意两点:1.     其中innerTe...
  • cuoguo1111
  • cuoguo1111
  • 2007年07月17日 11:29
  • 581

DHTML动态样式的作用

DHTML 的动态样式的作用是() DHTML实现了网页从Web服务器下载后无需再经过服务的处理,而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如,当鼠标指针移到文章段落中时,段落能...
  • qq_27437967
  • qq_27437967
  • 2017年05月22日 23:30
  • 333

DHTML 大全

方法add向 areas, controlRange 或 options 集合中添加一个元素。add创建一个新的 namespace 对象并将其添加到集合中。addBehavior给元素附加一个行为。...
  • helanye
  • helanye
  • 2009年07月11日 22:45
  • 2666

动态修改actionbar的Menu菜单中的显示内容

动态修改actionbar的Menu菜单中的显示内容当我们在给Actionbar添加一个menu菜单的时候一般使用onCreateOptionsMenu(Menu menu)这个方法,但这个onCre...
  • qq_19560943
  • qq_19560943
  • 2017年08月14日 16:05
  • 367

xhtml,xml,html,和dhtml的关系和区别

XHTML产生的原因,一方面是为了和未来的XML大规模的应用接轨,一方面还要兼容目前的数以万计的用HTML编写的网页以及他们的设计者,开发者相兼容,于是便出现了这个东西。以HTML编写的网页中,标记使...
  • a519781181
  • a519781181
  • 2016年07月29日 10:47
  • 1747

如何在web页面中,实现耗时操作的后台执行?多线程吗?

如何在web页面中,实现耗时操作的后台执行?多线程吗? 系统框架是spring, 功能描述:画面输入条件,单击确定按钮,执行check check通过后,执行一个非常耗时的操作(读取文件...
  • autumn20080101
  • autumn20080101
  • 2016年03月17日 22:57
  • 393

Dhtml,html,xhtml的区别

Dhtml是在静态html的基础上综合和其它动态的技术而成的网页技术;DHTML=HTML+CSS+JAVASCRIPT+DOMHTML则是纯粹的静态网页技术XHTML则是在HTML中加入了xml的规...
  • cesium
  • cesium
  • 2007年03月28日 15:13
  • 5536

DHTML、XHMLT、HTML的区别

Dhtml是在静态html的基础上综合和其它动态的技术而成的网页技术;DHTML=HTML+CSS+JavaScript+DOM HTML则是纯粹的静态网页技术 XHTML则是在HTML中...
  • u010874036
  • u010874036
  • 2016年08月19日 15:54
  • 691

用VB操纵DHTML(Document)对象

要想有代码提示请按如下方法:1.工程->部件,选择Microsoft Internet Controls2.工程->引用,选择Microsoft HTML Object Library,OK可以按F2...
  • sbdx
  • sbdx
  • 2008年03月16日 00:04
  • 829
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现Web页面内容动态改变的dhtml操作
举报原因:
原因补充:

(最多只允许输入30个字)