添加HTML内容和文本插入的方法

2017-05-17  本文已影响0人  RelaxedAndHappy

通常使用的innerHTML和innerText的方法进行文件的插入,
javaScript还提供了inserAdjacentHTML和insertAdjacentText方法,可以是指定的位置插入HTML内容和文本内容;

insertAdjacentHTML(where, html/text) 具有三个参数

where:插入文本的位置,系统了提供了4个可选值

<!--html-->
<div id="test">
        <p> 原始文本</p>
</div>
<script>
    var oTest = document.getElementById("test")
          oTest.inserAjacentHTML("beforbgin", "<p>插入元素自身的前面</p>");
          oTest.inserAjacentHTML("afterbegin", "<p>插入元素内部的第一个子节点</p>");
          oTest.inserAjacentHTML("beforeend", "<p>插入元素内部的最后一个子节点之后</p>");
          oTest.inserAjacentHTML("afterend", "<p>元素自身的后面</p>")
</script>

它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤,使其比直接innerHTML操作更快

上一篇 下一篇

猜你喜欢

热点阅读