溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹.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","<h2>在文本前容器內插入內容</h2>");
document.all.paral.insertAdjacentHTML("beforeEnd","<h3>在文本后容器內插入內容</h3>");
document.all.paral.insertAdjacentHTML("beforeBegin","<h5>在文本前容器外插入內容</h2>");
document.all.paral.insertAdjacentHTML("afterEnd","<h6>在文本后容器外插入內容</h3>");
}
</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()方法如何使用的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
