JavaScript insertAdjacentHTML()

admin發表於2019-11-06
JavaScriptHTML

此方法可以將字串引數作為HTML或者XML程式碼進行解析。

然後將解析產生的節點物件插入到當前元素的指定毗鄰位置。

為了便於方法的記憶與理解，從其名稱入手，由如下三個單詞構成：

（1）. insert：翻譯成漢語具有"插入"的意思。

（2）.adjacent：翻譯成漢語具有"毗鄰"的意思。

（3）.HTML：大家所熟知的前端佈局用的HTML（事實也可以插入XML程式碼）。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
targetElement.insertAdjacentHTML(position, string)

方法解析：

（1）.targetElement：目標元素。

（2）.position：規定被插入的位置的關鍵字，後面會逐一介紹。

（3）.string：一段字串，此方法會將其解析為節點物件，然後插入目標元素指定位置。

position屬性值是四個表示位置的關鍵字：

（1）.beforebegin：規定在目標元素的外部開始位置插入。

（2）.afterbegin：規定在目標元素的內部開始位置插入。

（3）.beforeend：規定在目標元素的內部結束位置插入。

（4）.afterend：規定在目標元素的外部結束位置插入。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/06/124659qohg3e2gvgh79lud.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

假設紅框是一個HTML元素形成的矩形盒，上面分別標註了對應的四個毗鄰位置。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style>
p{
  width:100px;
  height:50px;
  background-color:red;
}
#target{
  width:200px;
  height:80px;
  background-color:blue;
}
</style>  
<script>
window.onload = () => {
  let oTarget=document.getElementById("target");
  let obt=document.getElementById("bt");
  let str="<p></p>"
  obt.onclick = () => {
    oTarget.insertAdjacentHTML("beforebegin",str);
  }
}
</script>  
</head>
<body>
<hr><div id="target"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

點選按鈕後程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/06/124726g00hy0upcpngeg6s.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對上述程式碼進行一下詳細分析：

（1）.點選按鈕之前，與div外部開始位置毗鄰的是<hr>元素。

（2）.點選按鈕之後，insertAdjacentHTML()方法會解析字串"<p></p>"。

（3）.解析之後生成P元素節點物件，然後將其插入到div的"beforebegin"位置。

（4）.也就是插入到div元素外部開始位置處，<hr>的位置被<p>佔有。

在元素指定位置插入，而不是擦除元素內容再重新設定HTML或者XML內容時，推薦使用此方法，而不是innerHTML。具體相關內容可以參閱insertAdjacentHTML() 與 innerHTML 優點一章節。

相關文章