美文网首页
添加HTML内容和文本插入的方法

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

作者: RelaxedAndHappy | 来源:发表于2017-05-17 23:38 被阅读0次

通常使用的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操作更快

相关文章

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

    通常使用的innerHTML和innerText的方法进行文件的插入,javaScript还提供了inserAdj...

  • tkinker 组件 Text

    Text(文本)组件用于显示和处理多行文本。类似于html中的textarea 获取文本框内容 插入数据 清楚内容...

  • 移动端-内页-内容高度不够时的2种解决方法

    方法一:判断window和html的高度添加定位 方法二:判断window和html的高度,给内容部分添加最小高度...

  • 2019-09-19

    jquery实现动态添加html代码 阅读目录 一.html()方法 二.prepend()方法-内部插入 三.p...

  • html标签

    文本 纯文本 .txt 和 .html一样是纯文本 html超文本标记语言 html是语义标签,是给文本添加上了语...

  • H5常用标签

    文本 纯文本 .txt 和 .html一样是纯文本 html超文本标记语言 html是语义标签,是给文本添加上了语...

  • js基本语法

    插入 直接在html文件中添加 代码 其中 表示在 之间的是文本类型(text),javascript是为了告诉...

  • js加载时间线

    创建Document对象, 开始解析web页面. 解析HTML元素和它们的文本内容之后, 添加Element对象和...

  • 2017.11.27 模板语法

    一、vue插入文本的方法: v-html 二、属性 HTML 属性中的值应使用 v-bind 指令。 三、表达式 ...

  • js加载时间线

    1、创建Document对象,开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Tex...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/ymcvtxtx.html