通常使用的innerHTML和innerText的方法進(jìn)行文件的插入,
javaScript還提供了inserAdjacentHTML和insertAdjacentText方法,可以是指定的位置插入HTML內(nèi)容和文本內(nèi)容;
insertAdjacentHTML(where, html/text) 具有三個(gè)參數(shù)
where:插入文本的位置,系統(tǒng)了提供了4個(gè)可選值
- beforebgin : 元素自身的前面;
- afterbegin : 插入元素內(nèi)部的第一個(gè)子節(jié)點(diǎn);
- beforeend : 插入元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)之后;
- afterend : 元素自身的后面
- html/text : html文本/text文本
<!--html-->
<div id="test">
<p> 原始文本</p>
</div>
<script>
var oTest = document.getElementById("test")
oTest.inserAjacentHTML("beforbgin", "<p>插入元素自身的前面</p>");
oTest.inserAjacentHTML("afterbegin", "<p>插入元素內(nèi)部的第一個(gè)子節(jié)點(diǎn)</p>");
oTest.inserAjacentHTML("beforeend", "<p>插入元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)之后</p>");
oTest.inserAjacentHTML("afterend", "<p>元素自身的后面</p>")
</script>
它不會(huì)重新解析它正在使用的元素,因此它不會(huì)破壞元素內(nèi)的現(xiàn)有元素。這避免了額外的序列化步驟,使其比直接innerHTML操作更快