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

打印页面