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 ...
随机推荐
- Windowed functions can only appear in the SELECT or ORDER BY clauses
尝试做分页处理 select row_number over (orderby id asc) as rownum,* from table where rownum>=(@page*@page ...
- MySql使用mysqldump 导入与导出方法总结
导出数据库数据:首先打开cmd进入MySQL的bin文件夹下 1.导出education数据库里面的users表的表数据和表结构(下面以users表为例) mysqldump -u[用户名] -h[i ...
- 使用代理IP、高匿IP、连接失败
先百度一下,什么是代理IP 我们使用代理IP就是因为某些站点会屏蔽我们的IP,所以我们要动态的更换代理IP. 代理IP: 其中我们首先选择国内的IP,国外的一般都比较慢,其次不要选择如{新疆乌鲁木齐} ...
- node中console自定义样式
最近公司的项目一直使用gulpfile打包,项目会有三种项目打包(生产环境)和监听(开发环境)两种过程,同时需要清除文件夹,希望打包时增加提示以便区分,暂时分为上述三种提示打包.监听.清除. 先上co ...
- 129、TensorFlow计算图的可视化
import tensorflow as tf # Build your graph x = tf.constant([[37.0, -23.0], [1.0, 4.0]], name="i ...
- 线程池之ThreadPoolExecutor源码解析
1.变量 ThreadPoolExecutor先定义了这几个常量,初看时一脸懵逼,其实它就是用int的二进制高三位来表示线程池的状态, 先回顾一下位运算: <<’左移:右边空出的位置补0, ...
- MySQL-极恶安装
1.官网下载地址:https://dev.mysql.com/downloads/mysql/ 2.安装包下载后解压,并创建my.ini配置文件 内容如下,注意两个第三个#:MySQL的安装目录,第四 ...
- Spring Security 04
转至:Elim的博客http://elim.iteye.com/blog/2161648 Filter Porxy DelegatingFilterProxy DelegationFilterProx ...
- Mysql 在 select 查询时追加(添加)一个字段并指定值
在特定时候,在 mysql 的查询结果中我们需要追加一个字段来实现某些特定的功能,这时我们可以用到以下语法来实现 值 as 字段比如我们需要给这个查询结果追加一个 xx 字段并赋值为 null ,可以 ...
- 72.Minimum Window Substring（最小子串窗口）
Level: Hard 题目描述: Given a string S and a string T, find the minimum window in S which will contain ...