js append()和appendChild()和insertBefore()的区别
<body>
<input type="button" value="删除" id="btn">
<script>
// 在body添加div
// 1 创建元素
var oDiv = document.createElement('div');
oDiv.className = 'box';
// 2 添加到body末尾
document.body.appendChild(oDiv);
// document.body.appendChild('text'); 报错 Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
document.body.append(oDiv);
document.body.append('text');
// insertBefore() 在任意位置插入元素 第一个参数是需要插入的元素 第二个参数 是参照元素
document.body.insertBefore(oDiv,document.body.children[0]); var btn = document.getElementById('btn');
btn.onclick = function() {
// 删除元素 父亲中删除指定儿子
//document.body.removeChild(oDiv);
oDiv.remove();
}
</script>
</body>
这两个方法都是在父节点的末尾添加子节点
而 insertBefore() 在任意位置插入元素 第一个参数是需要插入的元素 第二个参数 是参照元素
append()和appendChild()的不同点在于：
append()还是一个实验中的方法，因此使用时可能存在兼容性问题，特别是IE浏览器（IE11不支持append方法），append方法也是既可以插入新节点或者文档中原有的节点，这一点和appendChild方法一样。append方法与上述的appendChild方法主要存在以下3个区别：
append方法的参数可以是一组Node对象或者String对象，而appendChild方法的参数只能是一个Node对象。
document.body.append('text'); //在父节点的末尾插入了text元素
document.body.appendChild('text'); 报错 Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
append方法没有返回值
append方法可以同时插入几个子节点（包括字符串），而appendChild一次只可以插入一个子节点
js append()和appendChild()和insertBefore()的区别的更多相关文章
- js插入节点appendChild和insertBefore
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- 《JavaScript+DOM编程艺术》的摘要（四）appendChild与insertBefore的区别
基本知识点: // 1.js里面为什么要添加window.onload=function (){} // 保证html文档都加载完了,才开始运行js代码,以防html文档没有加载完,找不到相应的元素 ...
- append()、appendChild() 和 innerHTML 的区别
概念和区别:append() 可以同时传入多个节点或字符串,没有返回值: 据说 append 还是试用期的方法,有兼容问题,(但我用了暂时火狐,谷歌,iE都能使用). https://develope ...
- JQuery之append和appendTo的区别，还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...
- 关于appendChild和insertBefore appendTo()和append
appendChild和insertBefore(原生js) appendTo()和append(jquery)
- js便签笔记（3）——切记：appendChild()、insertBefore()是移动element节点！
appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1"> & ...
- JS(JavaScript)插入节点的方法appendChild与insertBefore
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- （转）appendChild()、insertBefore()是移动element节点！
原文地址 appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1"& ...
- 【前端】js中new和Object.create()的区别
js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...
随机推荐
- 纯css实现瀑布流（multi-column多列及flex布局）
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
- Python网络爬虫-爬取微博热搜
微博热搜的爬取较为简单,我只是用了lxml和requests两个库 url=https://s.weibo.com/top/summary?Refer=top_hot&topnav=1& ...
- JavaScript 利用 filter+正则表达式对 list进行过滤包括模糊匹配
模糊查找 this.users.filter((item)=>{ var reg= new RegExp(this.searchText,'i'); return reg.test(item ...
- 【MEAN Web开发】CentOS 7 安装MongoDB 3.2.3
偶然得了一本书,AmosQ.Haviv 所著 <MEAN Web开发>.起初并不知道这啥东西,看了下目录发现正好有讲MongoDB而已.当时的项目正好需要做MongoDB的内容,之后这书就 ...
- 《图解设计模式》读书笔记3-3 Builder模式
目录 示例程序 类图 代码 角色 思路拓展 谁知道什么 构造和实现分离 和Template Method模式的区别和联系? Builder模式即建造者模式,利用这个模式可以组装具有复杂结构的实例. 示 ...
- IOS-swift5.1快速入门之旅
快速之旅 传统表明,新语言中的第一个程序应在屏幕上打印“Hello,world!”字样.在Swift中,这可以在一行中完成: print("Hello, world!") // P ...
- TypeError: 'generator' object is not subscriptable
TypeError: 'generator' object is not subscriptable 生成器对象不可以带下标 def get_row(self,row_no): if not isin ...
- Android超简单气泡效果
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680最近有用到水下气泡上升效果,因此在网上查了一下资料,结果还真找到了 ...
- Java中的多线程基础
1.线程与进程 进程: 进程是程序运行以及资源分配的基本单位,一个程序至少有一个进程. 如下图所示: 线程: 线程是CPU调度和分配的基本单位,一个进程至少有一个线程. 同一个进程中的线程共享进程资源 ...
- ecshop 广告调用的几种方式
1,ECSHOP后台设置广告更换 前台调用 {insert name='ads' id=2 num=1} id值表达广告位置的id.num表示数量 2,在代码加函数 function getads($ ...