摘要：.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="更多..." onclick="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" style="fontsize:6;color=’#ff00ff’">原来的内容</div><hr></body></html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!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/" style=/"background:red;width:40;height:20/">"+num+"</div>");num++;no_sys++;}}function remove_button(obj){obj.removenode(true);no_sys--;}</script><input type="button" onclick="add_button()" value="动态加"><input type="button" onclick="alert(c_input.innerhtml)" value="看"><div id="c_input"></div> </body></html>
用法：
<div id="test"><span style="color:red">test1</span> test2</div>
在js中可以使用：
test.innerhtml:
也就是从对象的起始位置到终止位置的全部内容,包括html标签。
上例中的test.innerhtml的值也就是
“<span style="color:red">test1</span> test2 ”
test.innertext:
从起始位置到终止位置的内容, 但它去除html标签
上例中的text.innertest的值也就是“test1 test2”, 其中span标签去除了。
test.outerhtml:
除了包含innerhtml的全部内容外, 还包含对象标签本身。
上例中的text.outerhtml的值也就是
<div id="test"><span style="color:red">test1</span> test2</div>
完整示例：
<div id="test"><span style="color:red">test1</span> test2</div><a href="javascript:alert(test.innerhtml)">innerhtml内容</a><a href="javascript:alert(test.innertext)">inerhtml内容</a><a href="javascript:alert(test.outerhtml)">outerhtml内容</a>
特别说明：
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()方法怎么使用?的详细内容。