.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()办法如何使用?的具体内容,更多请关注百分百源码网其它相关文章!