javascript对指定元素添加父元素

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

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

就可以获取到节点数据了

javascript对指定元素添加父元素相关推荐

JS给指定元素添加父元素
var child = document.getElementById("child");// 获取子元素 var parent = document.createElement( ...
原生js获取指定标签的父元素
js是没有这个函数的,js只有.parentNode获取上一级的父元素.如果想用js获取指定标签的祖先元素,不想使用jq.下面是封装的函数,初学者自己写的,实测有效. //js获取指定标签的父元素,获 ...
用jQuery访问指定元素的父元素
Target the Parent of an Element Using jQuery 每个HTML元素根据继承属性都有父parent元素. 举个例子,h3 元素的父元素是 <div clas ...
jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
子元素scroll父元素容器不跟随滚动JS实现
小tip: 子元素scroll父元素容器不跟随滚动JS实现这篇文章发布于 2015年12月18日,星期五,00:07,归类于 js实例. 阅读 44546 次, 今日 41 次 by zhangxi ...
子元素超出父元素宽高是否会报错？
目前来看,如果父元素是Container,那么子元素超出父元素就不会报错: 如果子元素被Column或Row包裹,那么子元素超出父元素就会报错: RenderFlex overflowed by 22 ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
html让空间高度跟随父级,CSS子元素跟父元素的高度一致的实现方法
绝对定位方法: (1)将父元素设置为相对定位,不写父元素的高度时,会随着左边的子元素高度变化而变化 .parent { /*关键代码*/ position: relative; /*其他样式*/ wi ...
怎么判断子元素距离父元素顶部位置_css子元素如何相对父元素定位？
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...

javascript对指定元素添加父元素

javascript对指定元素添加父元素相关推荐

最新文章

热门文章