js插入元素的新方法insertAdjacentHTML

下面介紹幾個新的插入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結構以下圖所示：

insertAdjacentHTML 和 insertAdjacentElement 也是相似的。