.insertadjacenthtml()方法怎么使用-

insertAdjacentHTML和 insertAdjacentText这两个方法很灵活，可以在指定的地方插入html内容和文本内容，在大部分情况下比element.innerHTML的性能更好，比Document Fragments更好的HTML文档插入方案，因为我们知道Document Fragments在某些IE版本中的表现不好。

insertAdjacentText方法与 insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同。

insertAdjacentHTML和insertAdjacentText方法：

IE的DHTML对象提供了四个可读写的属性来动态操作页面元素的内容：innerText, outerText, innerHTML, outerHTML.

需注意两点:

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

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

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

object.insertAdjacentText(sWhere, sText)

object.insertAdjacentHTML(sWhere, sText)

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

beforeBegin，afterBegin，beforeEnd，afterEnd

使用中需注意如下几点:

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对象而言，只有td(innerHTML/innerText)和table(outerHMTL/outerText)对象可以用某些属性来替换或插入内容;而其他table对象，如tr、tbody不能用这些属性来改变内容。

添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和 insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。insertAdjacentHTML方法：在指定的地方插入html标签语句

.insertadjacenthtml()方法具体怎么使用?

原型：insertAdajcentHTML(swhere,stext)

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

element.insertAdjacentHTML(position, text);

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

参数：

swhere: 指定插入html标签语句的地方，有四种值可用：

1. beforeBegin: 插入到标签开始前

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

3. beforeEnd:插入到标签结束标记前

4. afterEnd:插入到标签结束标记后

// 原来的HTML代码： div id= one one /div var d1 = document.getElementById( one d1.insertAdjacentHTML( afterend , div id= two two /div // 现在的HTML代码：// div id= one one /div div id= two two /div 

注意：该方法不是彻底置换现有的DOM结构，这使得它的执行速度比innerHTML操作快得多。

stext：要插入的内容

 html  head  script language= javascript function myfun()var obj = document.getElementById( btn1 obj.insertAdjacentHTML( afterEnd , br input name=/ txt1/  /script  /head  body  input name= txt  input id= btn1 name= btn1 type= button value= 更多... quot;myfun()  /body  /html 

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

 head  title 24.htm insertAdjacentHTML插入新内容 /title  script language= jscript function addsome()document.all.paral.insertAdjacentHTML( afterBegin , h1 在文本前容器内插入内容 /h1 document.all.paral.insertAdjacentHTML( beforeEnd , h2 在文本后容器内插入内容 /h2 document.all.paral.insertAdjacentHTML( beforeBegin , h4 在文本前容器外插入内容 /h1 document.all.paral.insertAdjacentHTML( afterEnd , h5 在文本后容器外插入内容 /h2  /script  /head  body onload= addsome()  div id= paral >
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN  HTML  HEAD  TITLE New Document /TITLE  META NAME= Generator CONTENT= EditPlus  META NAME= Author CONTENT=  META NAME= Keywords CONTENT=  META NAME= Description CONTENT=  /HEAD BODY  script var num=0;var No_sys=0;function Add_button(){if(No_sys 8){c_input.insertAdjacentHTML( beforeEnd , div id=/ bar +num+ / oncontextmenu=/ Remove_button(bar +num+ return false/ >
用法：
 div id= test  span >
在JS中可以使用：
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 
上例中的test.innerHTML的值也就是
“ span >
test.innerText:
从起始位置到终止位置的内容, 但它去除Html标签 
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。 
test.outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是
 div id= test span >
完整示例：
 div id= test  span >
特别说明：
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
 a href= javascript:alert(document.getElementById( test ).innerHTML.replace(/ .+? /gim, )) 无HTML,符合W3C标准 /a 
以上就是.insertadjacenthtml()方法怎么使用?的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。