HTML - DOM 元素 insertAdjacentElement() 方法

**insertAdjacentElement()** 方法允許您在網頁上將新的 HTML 元素精確地插入到另一個元素的相對位置。

語法

element.insertAdjacentElement(position, elementToInsert);

引數

引數	描述
position	指定相對於元素插入 HTML 內容的位置 beforebegin afterbegin beforeend afterend
elementToInsert	要插入結構中的新元素。

位置選項

**beforebegin:** 放置在指定元素之前。
**afterbegin:** 插入到指定元素內容的開頭之後。
**beforeend:** 插入到指定元素內容的結尾之前。
**afterend:** 新增到指定元素之後。

返回值

此方法直接在指定位置插入，不返回值。

HTML DOM 元素“insertAdjacentElement()”方法示例

以下是一些關於 insertAdjacentElement() 方法如何指定不同元素插入位置的示例。

在 beforebegin 處插入新內容

此示例演示了在 HTML DOM 中使用 insertAdjacentElement 方法。它在現有的具有 id 為 container 的 **<div>** 元素之前插入一個新的 **<p>** 元素，其中包含文字“New content-beforebegin”。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .container {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <h1>HTML DOM Element</h1>
    <h2>insertAdjacentElement() Method</h2> 
    <p>The container starts the existing content.</p>
    <p>Adds content before the existing element....</p>
            
    <div id="container" class="container">
      <h2 id="sectionLabel">Before:</h2>
      <p>This is the existing content.</p>
    </div>    
    <button onclick="addNewElement()">
       Add New Element Before Beginning
     </button>
    
    <script>
    function addNewElement() {
      let newElement = document.createElement('p');
      newElement.textContent ='New content - beforebegin';
      newElement.style.backgroundColor = 'lightgreen';
      
      document.getElementById
      ('container').insertAdjacentElement
      ('beforebegin', newElement);
      
      document.getElementById('sectionLabel').textContent=
      'After:';
    }
    </script>
</body>

</html>

在 afterbegin 處插入新內容

此示例演示了在 HTML DOM 中使用 insertAdjacentElement 方法。它在現有的具有 id 為 container 的 <div> 元素的開頭之後插入一個新的 <p> 元素，其中包含文字“New content-afterbegin”。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .container {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
        }
    </style>
</head>

<body>
    <h1>HTML DOM Element</h1>
    <h2>insertAdjacentElement() Method</h2>
    <p>The container(box) starts the existing content.</p>
    <p>Adds content after the existing element....</p> 
    
    <div id="container" class="container">
        <h3 id="sectionLabel">Before:</h3>
        <p>This is the existing content.</p>
    </div> 

    <button onclick="addNewElement()">
        Add New Element After Beginning
    </button>

    <script>
    function addNewElement() {

        let newElement = document.createElement('p');
        newElement.textContent = 'New content - afterbegin';
        newElement.style.backgroundColor = 'lightblue';  

        document.getElementById('container').insertBefore
        (newElement,document.querySelector
        ('#container > h3'));    

        document.getElementById('sectionLabel').textContent=
        'After:';
    }
    </script>
</body>

</html>

在 beforeend 處插入新內容

此示例演示了在 HTML DOM 中使用 insertAdjacentElement 方法。它在現有的具有 id 為 myContainer 的 <div> 元素的結尾之前插入一個新的 <p> 元素，其中包含文字“New content-beforeend”。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .container {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
        }
    </style>
</head>

<body>
    <h1>HTML DOM Element</h1>
    <h2>insertAdjacentElement() Method</h2>
        <p>Container marks the content's end..</p>
    <p>Adds content before the existing element....</p> 
        
    <div class="container" id="myContainer">
        <h3>Before:</h3>
        <p>This is the existing content.</p>
    </div>
    
    <button onclick="addNewElement()">
        Add New Element Before End
    </button>
    
    <script>
    function addNewElement() { 

        let newElement = document.createElement('p');
        newElement.textContent = 'New content beforeend';
        newElement.style.backgroundColor = 'lightblue'; 

        // Insert the new element before the existing one
        let container = document.getElementById
        ('myContainer');
        container.insertAdjacentElement
        ('beforeend', newElement);
    }
    </script>
</body>

</html>

在 afterend 處插入新內容

此示例演示了在 HTML DOM 中使用 insertAdjacentElement() 方法。它在現有的具有 id 為 container 的 <div> 元素的結尾之後插入一個新的 <p> 元素，其中包含文字“New content-afterend”。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .container {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
        }
    </style>
</head>

<body>
    <h1>HTML DOM Element</h1>
    <h2>insertAdjacentElement() Method</h2>
    <p>Container marks the content's end..</p>
    <p>Adds new content after the existing one...</p>
    
    <div id="container" class="container">
        <h3 id="sectionLabel">Before:</h3>
        <p>This is the existing content.</p>
    </div>
    
    <button onclick="addNewElement()">
        Add New Element After End
    </button>
    
    <script>
    function addNewElement() { 

        let newElement = document.createElement('p');
        newElement.textContent = 'New content - afterend';
        newElement.style.backgroundColor = 'lightcoral'; 

        // Insert new element after the existing one
        let existingElement = 
        document.getElementById('container');
        existingElement.insertAdjacentElement
        ('afterend', newElement); 

        let sectionLabel = 
        document.getElementById('sectionLabel');
        sectionLabel.textContent = 'After:';
    }
    </script>
</body>

</html>

支援的瀏覽器

方法
insertAdjacentElement()	是 5.0	是 12.0	是 8.0	是 5.0	是 11.50

html_dom_element_reference.htm

列印頁面