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

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

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

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

  • beforebgin : 元素自身的前面;
  • afterbegin : 插入元素内部的第一个子节点;
  • beforeend : 插入元素内部的最后一个子节点之后;
  • 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>插入元素内部的第一个子节点</p>");
          oTest.inserAjacentHTML("beforeend", "<p>插入元素内部的最后一个子节点之后</p>");
          oTest.inserAjacentHTML("afterend", "<p>元素自身的后面</p>")
</script>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,883评论 0 44
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,697评论 1 92
  • 作者:周明耀原文地址:http://www.ibm.com/developerworks/cn/java/j-lo...
    IT程序狮阅读 3,878评论 0 5
  • 作者/沛花仙子 上一篇《我和她之间,缺一场真正的风花雪月》(三) 从小喜欢画画。 虽然没有喜欢文字那么强烈,但也念...
    沐芷鲤阅读 3,627评论 17 9
  • 去年十一月份,网上流行水培红薯,说是冬天家里的一抹绿色,而且叶子能吃,各种营养。 当时心里羡慕,可手边只有刚切菜剩...
    朱黛阅读 1,396评论 0 0

友情链接更多精彩内容