首頁 > 文章 > web前端 > .insertadjacenthtml()方法怎麼使用?

.insertadjacenthtml()方法怎麼使用?

云罗郡主原創: 2018-10-27 15:20:152516瀏覽

摘要：.insertadjacenthtml()的用法網上資料很少，以下為php中文網整理的教程，對大家有一定的參考價值！

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(&#39;one&#39;);
d1.insertAdjacentHTML(&#39;afterend&#39;, &#39;<div id="two">two</div>&#39;);
// 现在的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>
innerHTML内容
inerHTML内容
outerHTML内容

特別說明：

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

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

以上是.insertadjacenthtml()方法怎麼使用?的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html中cite標籤的使用方法及屬性詳解下一篇：html中cite標籤的使用方法及屬性詳解

看更多