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)        //将标签插入到指定标签中
    }
  }
}