insertadjacenthtml()方法怎么使用?

　　insertAdjacentHTML和insertAdjacentText这两个方法很灵活，可以在指定的地方插入html内容和文本内容，在大部分情况下比element.innerHTML的性能更好，比DocumentFragments更好的HTML文档插入方案，因为我们知道DocumentFragments在某些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>

　　<pid=pdiv></p>

　　<SCRIPTLANGUAGE="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代码：<divid="one">one</div>

　　vard1=document.getElementById('one');

　　d1.insertAdjacentHTML('afterend','<divid="two">two</div>');

　　//现在的HTML代码：

　　//<divid="one">one</div><divid="two">two</div>

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

　　stext：要插入的内容

　　<html>

　　<head>

　　<scriptlanguage="javascript">

　　functionmyfun()

　　{

　　varobj=document.getElementById("btn1");

　　obj.insertAdjacentHTML("afterEnd","<br><inputname=/"txt1/">");

　　}

　　</script>

　　</head>

　　<body>

　　<inputname="txt">

　　<inputid="btn1"name="btn1"type="button"value="更多..."onclick="myfun()">

　　</body>

　　</html>

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

　　<head>

　　<title>24.htminsertAdjacentHTML插入新内容</title>

　　<scriptlanguage="jscript">

　　functionaddsome()

　　{

　　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>

　　<bodyonload="addsome()">

　　<divid="paral"style="fontsize:6;color=’#ff00ff’">原来的内容</div><hr>

　　</body>

　　</html>

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

　　<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">

　　<HTML>

　　<HEAD>

　　<TITLE>NewDocument</TITLE>

　　<METANAME="Generator"CONTENT="EditPlus">

　　<METANAME="Author"CONTENT="">

　　<METANAME="Keywords"CONTENT="">

　　<METANAME="Description"CONTENT="">

　　</HEAD><BODY>

　　varnum=0;

　　varNo_sys=0;functionAdd_button(){

　　if(No_sys<8){

　　c_input.insertAdjacentHTML("beforeEnd","<divid=/"bar"+num+"/"oncontextmenu=/"Remove_button(bar"+num+");returnfalse/"style=/"background:red;width:40;height:20/">"+num+"</div>");

　　num++;

　　No_sys++;

　　}

　　}functionRemove_button(obj){

　　obj.removeNode(true);

　　No_sys--;

　　}

　　</script>

　　<inputtype="button"onclick="Add_button()"value="动态加">

　　<inputtype="button"onclick="alert(c_input.innerHTML)"value="看">

　　<divid="c_input">

　　</div>

　　</BODY>

　　</HTML>

　　用法：

　　<divid="test">

　　<spanstyle="color:red">test1</span>test2

　　</div>

　　在JS中可以使用：

　　test.innerHTML:

　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

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

　　“<spanstyle="color:red">test1</span>test2”

　　test.innerText:

　　从起始位置到终止位置的内容,但它去除Html标签

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

　　test.outerHTML:

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

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

　　<divid="test"><spanstyle="color:red">test1</span>test2</div>

　　完整示例：

　　<divid="test">

　　<spanstyle="color:red">test1</span>test2

　　</div>

　　<ahref="javascript:alert(test.innerHTML)">innerHTML内容</a>

　　<ahref="javascript:alert(test.innerText)">inerHTML内容</a>

　　<ahref="javascript:alert(test.outerHTML)">outerHTML内容</a>

　　特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

　　<ahref="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54434.shtml