js插入元素的新方法insertAdjacentHTML

2019年9月8日 144次阅读 来源: 李小叔

下面介绍几个新的插入DOM的API：

insertAdjacentText
insertAdjacentHTML
insertAdjacentElement

以上三个方法分别是用来向一个DOM元素中插入文本，字符串格式的html代码结构，以及插入DOM元素；这三个方法的用法基本是一致的。

insertAdjacentText(position, string);
insertAdjacentHTML(position, htmlstring);
insertAdjacentElement(position, element);

其中，参数position表示的是插入的位置，字符串类型，取值可以有以下：

beforebegin
afterbegin
beforeend
afterend

可以用如下的结构来描述具体的位置：

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

接下来看一个demo：
有如下的DOM结构：

<div id="wrap">
    <div id="content">
        <p>origin test , test only</p>
    </div>
</div>
<script>
    window.onload = function () {
        var content = document.getElementById('content');
        content.insertAdjacentText('beforebegin', 'test beforebegin');
        content.insertAdjacentText('afterbegin', 'test afterbegin');
        content.insertAdjacentText('beforeend', 'test beforeend');
        content.insertAdjacentText('afterend', 'test afterend');
    }
</script>

执行以上代码后，DOM结构如下图所示：
《js插入元素的新方法insertAdjacentHTML》

insertAdjacentHTML 和 insertAdjacentElement 也是类似的。

    原文作者：李小叔
    原文地址: https://segmentfault.com/a/1190000011634948
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞