&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！insertAdjacentHTML说明及兼容性写法 | 老狼博客
添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法：在指定的地方插入html标签语句
原型：insertAdajcentHTML(swhere,stext)
swhere: 指定插入html标签语句的地方，有四种值可用：
beforeBegin: 插入到标签开始前
afterBegin:插入到标签开始标记之后
beforeEnd:插入到标签结束标记前
afterEnd:插入到标签结束标记后
if(!document.body.insertAdjacentHTML&&window.HTMLElement){
HTMLElement.prototype.insertAdjacentHTML = function(sWhere, sHTML){
var df = null,r = this.ownerDocument.createRange();
switch (String(sWhere).toLowerCase()) {
case “beforebegin”:
r.setStartBefore(this);
df = r.createContextualFragment(sHTML);
this.parentNode.insertBefore(df, this);
case “afterbegin”:
r.selectNodeContents(this);
r.collapse(true);
df = r.createContextualFragment(sHTML);
this.insertBefore(df, this.firstChild);
case “beforeend”:
r.selectNodeContents(this);
r.collapse(false);
df = r.createContextualFragment(sHTML);
this.appendChild(df);
case “afterend”:
r.setStartAfter(this);
df = r.createContextualFragment(sHTML);
this.parentNode.insertBefore(df, this.nextSibling);
本条目发布于。属于分类。作者是。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标签，该方法可能出现运行时错。如以下代码将出错:
&&&&& &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标签语句
原型：insertAdajcentHTML(swhere,stext)
swhere: 指定插入html标签语句的地方，有四种值可用：1. beforeBegin: 插入到标签开始前2. afterBegin:插入到标签开始标记之后3. beforeEnd:插入到标签结束标记前4. afterEnd:插入到标签结束标记后
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: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&
阅读(...) 评论()
年年行好运