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

列印頁面