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

打印页面