看黑马程序员视频学习之节点操作之复制节点

节点操作之复制节点

源数据

<ul><li>1</li><li>2</li><li>3</li></ul>

node.cloneNode()克隆

1.node.cloneNode(true)时
这里是选择了深拷贝

var ul = document.querySelector('ul')
var li = document.querySelector('li')
// cloneNode()括号内参数为空或者为false，则是浅拷贝，即只复制节点本身，不克隆里面的子节点
// 选择要克隆哪一节点
var lili = ul.children[1].cloneNode(true)
// 添加克隆的节点
ul.appendChild(lili)

2.node.cloneNode()括号内没参数或是false时

var ul = document.querySelector('ul')
var li = document.querySelector('li')
// cloneNode()括号内参数为空或者为false，则是浅拷贝，即只复制节点本身，不克隆里面的子节点
// 选择要克隆哪一节点
var lili = ul.children[1].cloneNode()
// 添加克隆的节点
ul.appendChild(lili)

往前克隆

把克隆的往最前面放

// 获取元素节点
var ul = document.querySelector('ul')
var li = document.querySelector('li')
// 复制子节点最后一个节点
var lii = ul.children[ul.children.length - 1].cloneNode(true)
// 添加复制的节点
ul.insertBefore(lii,ul.children[0])

看黑马程序员视频学习之节点操作之复制节点相关推荐

“黑马程序员”视频学习笔记之面向对象基础及调试问题
------- Windows Phone 7手机开发. .Net培训.期待与您交流! ------- ]方法: 语法:[访问修饰符][static] 返回值类型方法名() ...
黑马程序员 python 基础版哪个老师_(看黑马程序员Python基础班视频挺好，犹豫该不该报班？)...
看黑马程序员Python基础班视频挺好,犹豫该不该报班? 如果看视频比较好的话,还是建议自学吧,毕竟录制视频的老师不一定参与实质的讲课,且能自学也省一笔培训费用了.我是看的bilibili上黑马程序员 ...
【C++】黑马程序员 C++学习课程—C++核心编程
[C++]黑马程序员 C++学习课程-C++核心编程黑马程序员 C++学习课件, 为自用版本,单纯为了学习和查找资料更加方便本阶段主要针对C++面向对象编程技术做详细讲解,探讨C++中的核心和精髓 ...
2022黑马程序员-前端学习第一阶段（Day01-HTML的认知）
HTML的认知-Day01 学习笔记打卡 HTML认知基础概念铺垫(了解) 认识网页五大浏览器和渲染引擎 Web标准(了解) HTML初体验 HTML的感知 HTML骨架结构开发工具的使用语法 ...
黑马程序员Maven学习笔记
前言这里是黑马程序员Maven学习笔记分享,这是视频链接. 我还有其它前端内容的笔记,有需要可以查看. 文章目录前言基础 Maven简介 Maven是什么 Maven的作用 Maven的下载 M ...
程序员视频学习网站，推荐这几个网站不错
想要学好编程,就要多努力挖掘有用的知识,在编程行业,有几个程序员可以学习的视频网站,不管是自学还是培训学习,这些网站都可以帮助到自己,下面小编就为大家做一一的介绍. 程序员视频学习网站,推荐这几个网站 ...
黑马程序员视频教程学习mybatis框架常用注释SQL语句学习笔记？
mybatis学习笔记常用注释增删改查SQL语句常用注释拓展SQL语句解决实体类属性和数据库表中的属性名称不相同的问题: mybatis注解之一对一查询: mybatis注解之一对多查询: my ...
2023年黑马程序员Java学习路线图
2023年Java学科免费学习资源放送40+套课程,超过600小时的内容! 在过去的一年里,为了帮助更多人线上充电,学会更多技能,黑马程序员举办了 150+ 场免费直播公开课,新增精品视频教程 80+ ...
黑马程序员C++学习-01
课程视频链接:黑马程序员匠心之作|C++教程从0到1入门编程,学习编程不再难_哔哩哔哩_bilibili 目的:为了区分C语言和C++的区别,并且在学习的过程中,两者进行比较笔记方式:只写C语言和C ...
黑马程序员C++学习笔记＜第一阶段_基础篇＞
配套视频网址: 黑马程序员:http://yun.itheima.com/course/520.html?bili B站:https://www.bilibili.com/video/BV1et411 ...

看黑马程序员视频学习之节点操作之复制节点

节点操作之复制节点

源数据

node.cloneNode()克隆

往前克隆

看黑马程序员视频学习之节点操作之复制节点相关推荐

最新文章

热门文章