javascript对指定元素添加父元素

在处理自己的文章博客时，有一个需求：当富文本编辑器中插入的表格过长的话，就给它设置一个横向滚动条。
本来是一个很简单的需求，也就是给指定的元素添加一个父div，让div拥有overflow: auto;属性就解决了。
我当时的实现代码是这样的：

addDiv () {
//	获取所有的table表格
    let tables = document.querySelectorAll('table');
   	//	如果table存在于当前界面就执行接下的操作
    if (tables) {
      tables.forEach(function (perTable :any) {
      	//	创建一个div
        let tableFather = document.createElement('div');
        //	给div添加class名，className兼容性较好
        tableFather.className = 'table-box';
        //	将新建的div替代原先的table
        perTable.parentNode.replaceChild(tableFather, perTable);
        //	给新div添加子节点table
        tableFather.appendChild(perTable);
      });
    }
  }

但是当我在前台展示界面处理时候发现了问题。因为富文本编辑器的内容是属于后端的数据，不是原本就存在的dom节点，在mounted生命周期这里执行刚才的代码就会出现一个很尴尬的问题：那时候后端传过来的富文本数据还没渲染在界面上呢，就导致了获取到的数据为空

所以为了解决上面的情况，我选择直接在富文本编辑器上面入手。当在后台写好文章时，提交的时候直接调用上面的方法，动态添加，存进数据库就ok了。
但是富文本编辑器中的文字是在一个iframe标签中的，所以使用上方法无法获取到数据所以方法需要进行改写：

addDiv () {
//	获取iframe节点
    let iframe: any = document.querySelector('iframe');
    //	获取富文本中iframe的table标签
    let tables = iframe.contentWindow.document.querySelectorAll('table');
    console.log(tables);
    if (tables) {
      tables.forEach((perTable: any) => {
        let tableFather = document.createElement('div');
        tableFather.className = 'table-box';
        perTable.parentNode.replaceChild(tableFather, perTable);
        tableFather.appendChild(perTable);
      });
    }
    console.log(this.articleForm.newsIntro);
  }

就可以获取到节点数据了