HTML - DOM 元素 insertAdjacentText() 方法

insertAdjacentText() 方法允許您在相對於呼叫此方法的元素的特定位置插入文字內容。

語法

element.insertAdjacentText(position, text);

引數

此方法接受如下所述的兩個引數。

引數	描述
位置	指定相對於元素插入文字內容的位置 beforebegin afterbegin beforeend afterend
文字	要插入的文字字串。

位置選項

beforebegin: 將內容放在指定元素之前。
afterbegin: 將內容插入到指定元素內容的起始位置之後。
beforeend: 將內容插入到指定元素內容的結束位置之前。
afterend: 將內容新增到指定元素之後。

返回值

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

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

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

在 beforebegin 位置插入文字內容

此示例演示了在 HTML DOM 中使用 insertAdjacentText() 方法。它在 id 為 example1 的現有 元素的起始位置之前插入一個新的帶有文字“Text beforebegin”的 元素。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>insertAdjacentText Example - beforebegin</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>insertAdjacentText() Method</h2>
    <p>Inserts new Text Content 'beforebegin'.</p>
    
    <p id="example1">This is an example element.</p>
    
    <button onclick="insertBeforeBegin()">
        Insert beforebegin
    </button>
    
    <script>
        function insertBeforeBegin() {
        let element = document.getElementById('example1');
        element.insertAdjacentText('beforebegin', 
        'Text beforebegin ');
        }
    </script>
</body>

</html>

在 afterbegin 位置插入文字內容

此示例演示了在 HTML DOM 中使用 insertAdjacentText() 方法。它在 id 為 example2 的現有 元素的起始位置之後插入一個新的帶有文字“Text afterbegin”的  元素。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>insertAdjacentText Example - afterbegin</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>insertAdjacentText() Method</h2>
    <p>Inserts new Text Content 'afterbegin'.</p>
    <p id="example2">This is an example element.</p>
    
    <button onclick="insertAfterBegin()">
        Insert afterbegin
    </button>
    
    <script>
        function insertAfterBegin() {
            let element = document.getElementById('example2');
            element.insertAdjacentText('afterbegin', 
            'Text afterbegin ');
        }
    </script>
</body>

</html>

在 beforeend 位置插入文字內容

此示例演示了在 HTML DOM 中使用 insertAdjacentText() 方法。它在 id 為 example3 的現有 元素的結束位置之前插入一個新的帶有文字“Text beforeend”的 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>insertAdjacentText Example - beforeend</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>insertAdjacentText() Method</h2>
    <p>Inserts new Text Content 'beforeend'.</p>
    <p id="example3">This is an example element.</p>
    
    <button onclick="insertBeforeEnd()">
        Insert beforeend
    </button>
    
    <script>
        function insertBeforeEnd() {
            let element = document.getElementById('example3');
            element.insertAdjacentText('beforeend', 
            ' Text beforeend');
        }
    </script>
</body>

</html>

在 afterend 位置插入文字內容

此示例演示了在 HTML DOM 中使用 insertAdjacentText() 方法。它在 id 為 example4 的現有 元素的結束位置之後插入一個新的帶有文字“Text afterend”的 元素。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>insertAdjacentText Example - afterend</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>insertAdjacentText() Method</h2>
    <p>Inserts new Text Content 'afterend'.</p>
    <p id="example4">This is an example element.</p>
    
    <button onclick="insertAfterEnd()">
        Insert afterend
    </button>
    
    <script>
        function insertAfterEnd() {
            let element = document.getElementById('example4');
            element.insertAdjacentText('afterend', 
            ' Text afterend');
        }
    </script>
</body>

</html>

支援的瀏覽器

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

html_dom_element_reference.htm

列印頁面