将HTML字符串转化为HTML插入

后台提供的JSON

在制作信网单页专题的过程中，由于后台提供的JSON是HTML格式，如：

{
"title": " 2020年青岛体育亮点纷呈 竞技体育创造多项新纪录", 
"desc": "2020年青岛体育亮点纷呈。青岛黄海青港队..",
"content": "<div class='baohanP'><p>原标题：竞技体育创造多项新纪录</p>..."
}

这就导致了读取后需要将content转化为Dom结构进行插入

使用innerHTML

使用innerHTML方便快捷

<article ref="article"></article>
this.$refs.article.innerHTML = res.content;

使用appendChild

setHtml(str) {
      var div = document.createElement("div");
      // 将创建的标签内，插入html字符串
      div.innerHTML = str;
      // childNodes是一个类数组，如果其中只有一个div那么就返回childNodes[0]
      return div.childNodes[0]; 
}

在获取数据的回调中

<div class="info" ref="info"></div>
getDetails(this.$route.query.target).then(res => {
        if (res) {
          this.$refs.article.innerHTML = res.content;
          let dom = this.setHtml(res.reading);
          this.$refs.info.appendChild(dom);
        }
});

如果报错：Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

那么就是插入的是一个字符串不是Node对象

注：在VUE中，使用以上两种方法插入的<script src=".."/>中的JS代码不会执行！