vue中向html插入节点标签(简单易懂)

正常vue中插入节点会报这个错:

原因:插入的不是节点,而是一个字符串,需要将这个字符串变为对象才能插入到HTML中
在这里插入图片描述

简单几步:

1、创建新节点
2、将新节点替换要插入的标签(innerHTML方法)
3、将节点插入到页面指定的标签中(appendChild()方法)
<template>
  <div class="home">
    <h1 ref="home">首页(发现音乐)
      <h2>有数据</h2>
    </h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.test();
  },
  methods: {
    test() {
      let str = 'dont tel me what to do';   //创建字符串
      let newstr = str.anchor('english')    //将字符串变为a标签其中name为English
      let a = document.createElement('a')   //创建新标签
      a.innerHTML = newstr;                 //将新标签替换为a标签
      this.$refs.home.appendChild(a)        //将标签插入到指定标签中
    }
  }
}
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值