美文网首页
动态插入标签

动态插入标签

作者: 小白白呐 | 来源:发表于2020-03-23 17:32 被阅读0次

最近遇到一个需求,需要在h1标签前边插入图片,但是H1是从后台拿到的富文本,导致前端拿到的是带标签的数据

总结:createElement创建标签;setAttribute设置标签属性;insertBefore() 方法可在已有的子节点插入一个新的子节点。appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

还有一点需要注意的是:document.getElementsByTagName()获取的标签数组是一个伪数组,需要将伪数组转换为真数组才可以去遍历。(伪数组转换为真数组,直接百度就有了,这里用的是Array.from()方法!)

1、后台返回的接口数据:

后台接口返回的数据

2、动态插入img标签,再给他设置一个id和src,如图如果require("@/assets/circularAline.png")这样设置图片得话,会导致找不到图片,

3、解决方法就是先引进这个图片,然后再定义引用,这样就可以顺利的创建标签了

引入图片 插入标签的方法

在这个方法调用的时候需要注意一下,那就是要再获取完富文本以后直接调用这个方法,

相关文章

  • 动态插入标签

    最近遇到一个需求,需要在h1标签前边插入图片,但是H1是从后台拿到的富文本,导致前端拿到的是带标签的数据 总结:c...

  • 动态插入script标签

  • 动态插入script标签

  • 如何解决跨域问题

    JSONP:原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我...

  • 跨域(其中之四)

    一. 通过JSONP跨域 利用script标签不受同源策略的影响的特性,在页面中动态插入script标签。scri...

  • 试题2

    如何解决跨域问题? jsonp(jsonp 的原理是动态插入 script 标签) document.domain...

  • 跨域问题

    如何解决跨域问题 JSONP: 原理是:动态插入script标签,通过script标签引入一个js文件,这个js文...

  • 认识JSONP

    原理: 动态创建script标签并插入dom 设置script标签src为需要请求的资源地址 为script的sr...

  • 前端面试题总结【39】:异步加载和延迟加载

    异步加载的方案: 动态插入 script 标签 通过 ajax 去获取 js 代码,然后通过 eval 执行 sc...

  • AJAX异步加载

    异步加载的方案: 动态插入 script 标签 通过 ajax 去获取 js 代码,然后通过 eval 执行 sc...

网友评论

      本文标题:动态插入标签

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