當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

HTML DOM insertAdjacentElement()用法及代碼示例

insertAdjacentElement()方法將指定的元素插入指定的位置。該職位的法律價值是。

  • afterbegin
  • afterend
  • beforebegin
  • beforeend

用法:

node.insertAdjacentElement(position, element)

參數：此方法需要2個參數。


  • position:相對於元素的位置。合法值是：
  1. afterbegin:就在元素內部，在它的第一個孩子之前。
  2. afterend:在元素本身之後。
  3. beforebegin:在元素本身之前。
  4. beforeend:在元素的最後一個子元素之後。
  • element:您要插入的元素。

返回值：插入的元素；如果插入失敗，則為null。

異常：如果無法識別指定的位置，或者指定的元素不是有效元素。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <!--script to insert specified 
        element to the specified position-->
    
    <script> 
        function insadjele() { 
            var s = document.getElementById("d1"); 
            var h = document.getElementById("head3"); 
            
            h.insertAdjacentElement("afterend", s); 
        } 
    </script> 
</head> 
  
<body> 
    <h1> Welcome To GeeksforGeeks</h1> 
  
    <div id="d1">div element</div> 
    <h3 id="head3">header element</h3> 
  
    <p>Click the button to insert  
      div element after the header element</p> 
  
    <button onclick="insadjele()">Insert element</button> 
  
</body> 
  
</html>

輸出：

在單擊插入元素按鈕之前：

單擊插入元素按鈕後：

支持的瀏覽器：下麵列出了DOM insertAdjacentElement()方法支持的瀏覽器：

  • 穀歌瀏覽器
  • 火狐瀏覽器
  • Opera
  • IE瀏覽器
  • 蘋果瀏覽器


相關用法


注：本文由純淨天空篩選整理自ProgrammerAnvesh大神的英文原創作品 HTML | DOM insertAdjacentElement() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。