您好,登錄后才能下訂單哦!
這篇文章主要介紹.insertadjacenthtml()方法如何使用,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
insertAdjacentHTML和 insertAdjacentText這兩個(gè)方法很靈活,可以在指定的地方插入html內(nèi)容和文本內(nèi)容,在大部分情況下比element.innerHTML的性能更好,比Document Fragments更好的HTML文檔插入方案,因?yàn)槲覀冎繢ocument Fragments在某些IE版本中的表現(xiàn)不好。
insertAdjacentText方法與 insertAdjacentHTML方法類似,只不過(guò)只能插入純文本,參數(shù)相同。
insertAdjacentHTML和insertAdjacentText方法:
IE的DHTML對(duì)象提供了四個(gè)可讀寫的屬性來(lái)動(dòng)態(tài)操作頁(yè)面元素的內(nèi)容:innerText, outerText, innerHTML, outerHTML.
需注意兩點(diǎn):
1. 其中innerText,outerText屬性的值是作為普通文本呈現(xiàn)的,即使它含有HTML標(biāo)簽也如實(shí)反應(yīng)出來(lái);而innerHTML, outerHTML呈現(xiàn)的是經(jīng)HTML引擎解析后文本,它可以反應(yīng)屬性中HTML標(biāo)簽的表現(xiàn)效果。
2. 對(duì)對(duì)象的outerText,outerHTML屬性賦值(即寫操作)會(huì)刪除該對(duì)象。
以上四個(gè)屬性的賦值操作只是替換原對(duì)象的文本內(nèi)容,想要在頁(yè)面中指定元素相關(guān)位置新增文本內(nèi)容,需采用insertAdjacentHTML和insertAdjacentText方法。形式如下:
object.insertAdjacentText(sWhere, sText)
object.insertAdjacentHTML(sWhere, sText)
其中 sWhere 表示插入的文本相對(duì)于html標(biāo)簽的位置,有如下四個(gè)預(yù)設(shè)值:
beforeBegin,afterBegin,beforeEnd,afterEnd
使用中需注意如下幾點(diǎn):
1.這兩種方法必須在整個(gè)文檔裝載完成之后才能使用,否則將出錯(cuò)。
2. InsertAdjacentText只能插入普通文本,InsertAdjacentHTML插入html格式的文本
3. 用InsertAdjacentHTML插入腳本,必須在script元素中使用defer屬性,否則腳本執(zhí)行將出現(xiàn)運(yùn)行期錯(cuò)誤
4.InsertAdjacentHTML插入html元素后,all以及其他可能的元素集合將自動(dòng)更新以反應(yīng)動(dòng)態(tài)變化。如頁(yè)面后續(xù)元素的sourceIndex 屬性將改變。
5.當(dāng)賦予InsertHTML/outerHTML屬性無(wú)效的HTML標(biāo)簽,該方法可能出現(xiàn)運(yùn)行時(shí)錯(cuò)。如以下代碼將出錯(cuò):
<BODY> <p id=pdiv></p> <SCRIPT LANGUAGE="javascript"> pdiv.innerHTML = "<p>hello</p>" </SCRIPT> </BODY>
此外頁(yè)面內(nèi)容動(dòng)態(tài)操作還需要注意如下一些細(xì)節(jié):
1.只有文檔BODY內(nèi)顯示的內(nèi)容能被以上屬性和方法動(dòng)態(tài)改變,BODY對(duì)象的內(nèi)容能被動(dòng)態(tài)操作,但BODY對(duì)象本身無(wú)法被替換。
2.以上屬性和方式不能操作空標(biāo)簽(沒(méi)有內(nèi)容的html標(biāo)簽),如input,img。
3.對(duì)于table對(duì)象而言,只有td(innerHTML/innerText)和table(outerHMTL/outerText)對(duì)象可以用某些屬性來(lái)替換或插入內(nèi)容;而其他table對(duì)象,如tr、tbody不能用這些屬性來(lái)改變內(nèi)容。
添加HTML內(nèi)容與文本內(nèi)容以前用的是innerHTML與innerText方法,最近發(fā)現(xiàn)還有insertAdjacentHTML和 insertAdjacentText方法,這兩個(gè)方法更靈活,可以在指定的地方插入html內(nèi)容和文本內(nèi)容。insertAdjacentHTML方法:在指定的地方插入html標(biāo)簽語(yǔ)句
.insertadjacenthtml()方法具體怎么使用?
原型:insertAdajcentHTML(swhere,stext)
Element.insertAdjacentHTML方法解析HTML字符串,然后將生成的節(jié)點(diǎn)插入DOM樹的指定位置。
element.insertAdjacentHTML(position, text);
該方法接受兩個(gè)參數(shù),第一個(gè)是指定位置,第二個(gè)是待解析的字符串。
參數(shù):
swhere: 指定插入html標(biāo)簽語(yǔ)句的地方,有四種值可用:
1. beforeBegin: 插入到標(biāo)簽開始前
2. afterBegin:插入到標(biāo)簽開始標(biāo)記之后
3. beforeEnd:插入到標(biāo)簽結(jié)束標(biāo)記前
4. afterEnd:插入到標(biāo)簽結(jié)束標(biāo)記后
// 原來(lái)的HTML代碼:<div id="one">one</div> var d1 = document.getElementById('one'); d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); // 現(xiàn)在的HTML代碼: // <div id="one">one</div><div id="two">two</div>
注意:該方法不是徹底置換現(xiàn)有的DOM結(jié)構(gòu),這使得它的執(zhí)行速度比innerHTML操作快得多。
stext:要插入的內(nèi)容
<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插入新內(nèi)容</title> <script language="jscript"> function addsome() { document.all.paral.insertAdjacentHTML("afterBegin","<h2>在文本前容器內(nèi)插入內(nèi)容</h2>"); document.all.paral.insertAdjacentHTML("beforeEnd","<h3>在文本后容器內(nèi)插入內(nèi)容</h3>"); document.all.paral.insertAdjacentHTML("beforeBegin","<h5>在文本前容器外插入內(nèi)容</h2>"); document.all.paral.insertAdjacentHTML("afterEnd","<h6>在文本后容器外插入內(nèi)容</h3>"); } </script> </head> <body onload="addsome()"> <div id="paral" style="fontsize:6;color=’#ff00ff’">原來(lái)的內(nèi)容</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="動(dòng)態(tài)加"> <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:
也就是從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容,包括Html標(biāo)簽。
上例中的test.innerHTML的值也就是
“<span style="color:red">test1</span> test2 ”
test.innerText:
從起始位置到終止位置的內(nèi)容, 但它去除Html標(biāo)簽
上例中的text.innerTest的值也就是“test1 test2”, 其中span標(biāo)簽去除了。
test.outerHTML:
除了包含innerHTML的全部?jī)?nèi)容外, 還包含對(duì)象標(biāo)簽本身。
上例中的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內(nèi)容</a> <a href="javascript:alert(test.innerText)">inerHTML內(nèi)容</a> <a href="javascript:alert(test.outerHTML)">outerHTML內(nèi)容</a>
特別說(shuō)明:
innerHTML是符合W3C標(biāo)準(zhǔn)的屬性,而innerText只適用于IE瀏覽器,因此,盡可能地去使用innerHTML,而少用innerText,如果要輸出不含HTML標(biāo)簽的內(nèi)容,可以使用innerHTML取得包含HTML標(biāo)簽的內(nèi)容后,再用正則表達(dá)式去除HTML標(biāo)簽,下面是一個(gè)簡(jiǎn)單的符合W3C標(biāo)準(zhǔn)的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無(wú)HTML,符合W3C標(biāo)準(zhǔn)</a>
以上是.insertadjacenthtml()方法如何使用的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。