insertAdjacentHTML和insertAdjacentText两种方法比较灵活，可以在指定的地方插入HTML内容和文本内容。在大多数情况下，它们比element.innerHTML有更好的性能，比DocumentFragments有更好的HTML文档插入方案，因为我们知道DocumentFragments在某些ie版本中表现不好。

insertAdjacentText方法类似于insertAdjacentHTML方法，不同的是只有纯文本可以用相同的参数插入。

InsertAdjacentHTML和insertAdjacentText方法：

IE的DHTML对象提供了四个可以读写的属性来动态操纵页面元素的内容：innertext，outertext，innerhtml，outerhtml。

注意2:

1.内文本、外文本属性的值以普通文本的形式呈现，即使包含HTML标签也能如实反映；而内部html和外部html呈现的是HTML引擎解析的文本，可以反映HTML标签在属性上的性能效果。

2.为对象的外部文本和外部HTML属性赋值(即写操作)将删除该对象。

以上四个属性的赋值操作只是替换了原对象的文本内容。要在页面上指定元素的相关位置添加文本内容，应该采用insertAdjacentHTML和insertAdjacentText方法。表格如下：

object . insertadjacenttext(sWhere，sText)

object . insertadjacenthtml(sWhere，sText)

其中sWhere表示插入文本相对于html标记的位置，具有以下四个预设值：

开始前，开始后，结束前，结束后

使用：注意以下几点

1.这两种方法只能在整个文档加载后使用，否则会出现错误。

2.InsertAdjacentText只能插入普通文本，InsertAdjacentHTML插入HTML格式文本

3.要使用InsertAdjacentHTML插入脚本，必须在脚本元素中使用“延迟”属性，否则在执行脚本时会出现运行时错误。

4.插入html元素后，所有和其他可能的元素集将自动更新以反映动态变化。例如，页面后续元素的sourceIndex属性将会改变。

5.当给InsertHTML/OutHTMl属性一个无效的HTMl标记时，该方法可能有一个运行时错误。如果下面的代码会出错，

身体

pid=pdiv/p

SCRIPTLANGUAGE='javascript '

pdiv.innerHTML='phello/p '

/SCRIPT

/BODY

此外，页面内容动态操作还需要注意以下细节：

1.只有文档BODY中显示的内容可以通过上述属性和方法动态改变，BODY对象的内容可以动态操作，但是BODY对象本身不能被替换。

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

3.对于表格对象，只有td(innerHTML/innerText)和table(Outhermtl/OutText)对象可以用某些属性替换或插入内容；其他表对象，如tr和tbody，不能使用这些属性来更改它们的内容。

在添加html内容和文本内容之前，使用了Innerhtml和innerText方法。最近发现了insertadjacentText和insertAdjacentText方法，比较灵活，可以在指定的地方插入HTML内容和文本内容。InsertAdjacentHTML方法：在指定位置插入HTML标记语句

如何使用？insertadjacenthtml()方法？

原型：insertdajcenthtml (s where，stext)

Element.insertAdjacentHTML方法解析HTML字符串，然后将生成的节点插入到DOM树的指定位置。

element.insertAdjacentHTML(位置，文本)；

该方法接受两个参数，个是指定的位置，第二个是要分析的字符串。

参数：

Swhere:指定在哪里插入html标记语句。有四个可用值：

1 .在标签开始之前插入beforeBegin:

2.afterBegin:插入到标签开始标签之后

3 .在结束标记之前插入beforeEnd:

4 .在结束标记中插入结束标记：之后

//原始HTML代码：divid='one'one/div

var D1=document . getelementbyid(' one ')；

D1 . insertadjacenthtml(' after end '，' divided=' two ' two/div ')；

//现在HTML代码：

//divided=' one ' one/divided=' two ' two/div

注意：这个方法并没有完全替代现有的DOM结构，这使得它的执行速度比innerHTML操作快很多。

Stext:插入什么

超文本标记语言

头

scriptlanguage='javascript '

functionmyfun()

{

var obj=document . GetElementbyID(' BTN 1 ')；

obj。insertadjacenthtml(' end后'，'自带put name=/' txt 1/')；

}

/script

/head

身体

inputname='txt '

输入id=' BTN 1 '名称=' BTN 1 '类型='按钮'值='更多.onclick='myfun()'

/body

/html

=============================

头

title24.htminsertAdjacentHTML插入新内容/title

scriptlanguage='jscript '

functionaddsome()

{

文件。全部。帕拉。insertadjacenthtml(' begin '，' h1之后在文本前容器内插入内容/h1’)；

文件。全部。帕拉。insertadjacenthtml(' BeforeEnd '，' h2在文本后容器内插入内容/H2 ')；

文件。全部。帕拉。insertadjacenthtml(' BeforeBegin '，' h4在文本前容器外插入内容/h1’)；

文件。全部。帕拉。insertadjacenthtml(' end后'，' h5在文本后容器外插入内容/H2 ')；

}

/script

/head

bodyonload='addsome()'

divid=' paral ' style=' font size :6；color='#ff00ff ' '原来的内容/divhr

/body

/html

=================================

！doctypehtml public '-//W3C//DTDHTML 4.0 transitional//EN '

超文本标记语言

头

标题新文档/标题

元名称='生成器' CONTENT='编辑加号'

元名称='作者'内容=' '

元名称='关键字'内容=' '

元名称='描述'内容=' '

/PREMADY

脚本

var num=0；

varNo _ sys=0；functionAdd_button(){

if(No_sys8){

c输入。插入相邻html(' BeforeEnd '，' divided=/' bar ' num '/'在上下文菜单上=/' Remove _ button(bar ' num ')；返回false/' style=/' background : red；宽度：40;高度：20/' num '/div ')；

数字

No _ sys

}

}功能移除按钮{(obj)

obj。移除节点(true)；

no _ sys-；

}

/script

输入类型=' button ' onclick=' Add _ button()' value='动态加'

input type=' button ' onclick=' alert(c _ input。innerHTMl)'值='看'

divid='c_input '

/div

/BODY

/HTML

用法：

分割='测试'

span style=' color : red ' test1/span test2

/div

在射流研究…中可以使用：

test.innerHTML:

也就是从对象的起始位置到终止位置的全部内容，包括超文本标记语言标签。

上例中的test.innerHTML的值也就是

" span style=' color : red ' test1/span test2 "

test.innerText:

从起始位置到终止位置的内容，但它去除超文本标记语言标签

上例中的text.innerTest的值也就是“test1test2”，其中跨度标签去除了。

test.outerHTML:

除了包含innerHTML的全部内容外，还包含对象标签本身。

上例中的text.outerHTML的值也就是

divid=' test ' span style=' color : red ' test1/span test2/div

完整示例：

分割='测试'

span style=' color : red ' test1/span test2

/div

ahref=' JavaScript : alert(测试。innerHTMl)' innerHTMl内容/a

ahref=' JavaScript : alert(测试。innertext)'在html中内容/a

ahref=' JavaScript : alert(测试。OuteHTML)' OuteHTML内容/a

特别说明：

innerHTML是符合万维网路联盟(万维网Consortium简称W3C)标准的属性，而innerText只适用于工业管理学(工业工程)浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含超文本标记语言标签的内容，可以使用innerHTML取得包含超文本标记语言标签的内容后，再用正则表达式去除超文本标记语言标签，下面是一个简单的符合万维网路联盟(万维网Consortium简称W3C)标准的示例：

ahref=' JavaScript : alert(文档。GetElementBYid(' test ')。innerHTML。替换(/)./gim，"))"无HTML，符合万维网路联盟(万维网Consortium简称W3C)标准/a

本文转载自中文网