HTML - DOM 元素 insertAdjacentHTML() 方法

**insertAdjacentHTML()** 方法允许您在相对于调用此方法的元素的特定位置插入指定的 HTML 代码。

语法

element.insertAdjacentHTML(position, html);

参数

参数	描述
position	指定相对于元素插入 HTML 内容的位置 beforebegin afterbegin beforeend afterend
html	要插入的 HTML 字符串。

位置选项

**beforebegin:** 将内容放置在指定元素之前。
**afterbegin:** 将内容插入到指定元素内容的开头之后。
**beforeend:** 将内容插入到指定元素内容的结尾之前。
**afterend:** 将内容添加到指定元素之后。

返回值

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

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

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

在 afterend 插入 HTML 代码

此示例演示了在 HTML DOM 中使用 insertAdjacentHTML() 方法。它在 id 为 container 的现有 <div> 元素的结尾之后插入一个新的 <p> 元素，其中包含文本“New content-afterend”。

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

<body>
    <h1>HTML - DOM Element</h1>
    <h2>insertAdjacentHTML() Method</h2>
    <p>Inserts new HTML content 'afterend'.</p>
    
    <div id="container" class="container"> 
      <h4>Existing content within this container.<h4>
    </div>
    <button onclick="insertAfterEnd()">
        Insert afterend
    </button>
    
    <script>
    function insertAfterEnd() {
      let container = document.getElementById('container');
      container.insertAdjacentHTML
      ('afterend', 
      '<div class="new-content">New content-afterend</div>');
    }
    </script>
</body>

</html>

在 beforeend 插入 HTML 代码

此示例演示了在 HTML DOM 中使用 insertAdjacentHTML() 方法。它在 id 为 myContainer 的现有 <div> 元素的结尾之前插入一个新的 <p> 元素，其中包含文本“New content-beforeend”。

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

<body>
    <h1>HTML - DOM Element</h1>
    <h2>insertAdjacentHTML() Method</h2>
    <p>Inserts new HTML content 'beforeend'.</p>
        
    <div id="container" class="container">
        <h4>Existing content within this container.<h4>
    </div> 
    <button onclick="insertBeforeEnd()">
        Insert beforeend
    </button> 
    
    <script>
        function insertBeforeEnd() {
        let container = document.getElementById('container');
        container.insertAdjacentHTML('beforeend',
        '<div class="new-content">New content-beforeend</div>'
        );
    }
</script>
</body>

</html>

在 afterbegin 插入 HTML 代码

此示例演示了在 HTML DOM 中使用 insertAdjacentHTML() 方法。它在 id 为 container 的现有 <div> 元素的开头之后插入一个新的 <p> 元素，其中包含文本“New content-afterbegin”。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .container {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
        }
        .new-content {
        background-color: #99ff99; 
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>insertAdjacentHTML() Method</h2>
    <p>Inserts new HTML content 'beforebegin'.</p>
    
    <div id="container" class="container">
        <h4>Existing content within this container.<h4>
    </div> 
    <button onclick="insertAfterBegin()">
        Insert afterbegin
    </button>
    
    <script>
    function insertAfterBegin() {
        let container = document.getElementById('container');
        container.insertAdjacentHTML('afterbegin', 
        '<div class="new-content">New content-afterbegin</div>'
        );
    }
    </script>
</body>

</html>

在 beforebegin 插入 HTML 代码

此示例演示了在 HTML DOM 中使用 insertAdjacentHTML() 方法。它在 id 为 container 的现有 <div> 元素之前插入一个新的 <p> 元素，其中包含文本“New content-beforebegin”。

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

<body>
    <h1>HTML - DOM Element</h1>
    <h2>insertAdjacentHTML() Method</h2>
    <p>Inserts new HTML content 'beforebegin'.</p>
    
    <div id="container" class="container">
        <h4>Existing content within this container.<h4>
    </div>
    
    <button onclick="insertBeforeBegin()">
        Insert beforebegin 
    </button>

    <script>
    function insertBeforeBegin() {
        let container = document.getElementById('container');
        container.insertAdjacentHTML('beforebegin', 
        '<div class="new-content">New content-beforebegin</div>'
        );
    }
    </script>
</body>

</html>

支持的浏览器

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

html_dom_element_reference.htm

打印页面