js原生，将已渲染dom对象插入指定位置后结果分析

yankeys 发布于2019-08-21 11:25 / 1539人阅读

摘要：把插到的前面分析如果参数不是字符串，而是一个已渲染的对象，那么进行插入操作时，会移动这个节点到指定的位置，而不是复制一个这个节点。

HTML:

js：

function swop(obj1,obj2){
        obj2.parentNode.insertBefore(obj1,obj2);
    }
var ul=document.getElementsByTagName("ul")[0];
swop(ul.children[1],ul.children[3] );//把2插到4的前面

result：

分析：
obj2.parentNode.insertBefore(obj1,obj2);
如果参数obj1不是字符串，而是一个已渲染的dom对象（ul.children[1]），那么进行插入操作时，会移动这个dom节点到指定的位置，而不是复制一个这个节点。

云服务器 GPU云服务器 js原生dom事件 js操作dom对象 js 对象插入数据 DOM渲染

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86678.html

XCel 项目总结 - Electron 与 Vue 的性能优化

摘要：而这里的单元格信息是唯一的，所以直接通过为一个空对象赋值即可。和相关的知识和技巧高亮的列单元格采用展示。在中，被选中的单元格会高亮相应的行和列，以提醒用户。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一个 Excel 数据清洗工具，其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。 XCEL...

XUI 2019-08-22 10:45 评论0 收藏0
React 导读（一）

摘要：需要有一定的基础和的使用经验。这就是属性的作用。方法接收一个新对象来重新赋值。也接收一个函数，这个回调函数这里我默认有一个参数，表示之前的的值，这个函数的返回值就是最新的。但是不同的是在组件内部是只读的。前言写这篇文章的主要目标是让初学者更快的上手 React 的项目开发，能有一个循循渐进的理解过程。需要有一定的 JavaScript 基础和 NPM 的使用经验。不多说了，下面会按...

kumfo 2019-08-22 15:35 评论0 收藏0
原生JS中DOM节点相关API合集

摘要：返回一个个比特位的二进制值，表示参数节点和当前节点的关系返回布尔值，用于检查两个节点是否相等。生成一个对象事件方法生成一个事件对象，该对象能被方法使用注册事件注销事件触发事件其他返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。原生JS中DOM节点相关API合集节点属性 Node.nodeName //返回节点名称，只读 Node.nodeType //返回节点类...

junfeng777 2019-08-20 15:37 评论0 收藏0
原生JS中DOM节点相关API合集

摘要：返回一个个比特位的二进制值，表示参数节点和当前节点的关系返回布尔值，用于检查两个节点是否相等。生成一个对象事件方法生成一个事件对象，该对象能被方法使用注册事件注销事件触发事件其他返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。原生JS中DOM节点相关API合集节点属性 Node.nodeName //返回节点名称，只读 Node.nodeType //返回节点类...

BaronZhang 2019-08-01 16:38 评论0 收藏0
vue源码阅读之数据渲染过程

摘要：图在中应用三数据渲染过程数据绑定实现逻辑本节正式分析从到数据渲染到页面的过程，在中定义了一个的构造函数。一、概述 vue已是目前国内前端web端三分天下之一，也是工作中主要技术栈之一。在日常使用中知其然也好奇着所以然，因此尝试阅读vue源码并进行总结。本文旨在梳理初始化页面时data中的数据是如何渲染到页面上的。本文将带着这个疑问一点点追究vue的思路。总体来说vue模版渲染大致流程如图1所...

AlphaGooo 2019-05-22 16:53 评论0 收藏0