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 ...
随机推荐
- python 日期相关
基本的日期与时间转换 问题 你需要执行简单的时间转换,比如天到秒,小时到分钟等的转换. 解决方案 为了执行不同时间单位的转换和计算,请使用 datetime 模块. 比如,为了表示一个时间段,可以创建 ...
- 利用 Skywalking 搭建 APM（应用性能管理）— 安装与配置
1.什么是 Skywalking Skywalking 是一个APM系统,即应用性能监控系统,为微服务架构和云原生架构系统设计.它通过探针自动收集所需的指标,并进行分布式追踪.通过这些调用链路以及指标 ...
- Android O编译前修改文件和目录权限
当需要修改某文件或路径权限时,我们可以在init.rc开机启动某节点添加chmod命令进行修改.但是对于system分区,由于是ro权限,在init.rc使用chmod修改权限无效.需要在文件编译时, ...
- leaflet-加载天地图-解决纬度偏移特别大
这几天学习 leaflet 在加载天地图时将以前的接口拿来用结果偏差了特别大(差不多是 90 度),中国纬度到了 100 多,试了改变投影和 y 轴翻转的配置都不好使,最后上网搜索到了Leaflet. ...
- springboot参数校验
为了能够进行嵌套验证,必须手动在Item实体的props字段上明确指出这个字段里面的实体也要进行验证.由于@Validated不能用在成员属性(字段)上,但是@Valid能加在成员属性(字段)上,而且 ...
- 【Visual Studio】 使用EF、 Linq2Sql快速创建数据交互层（一）
项目伊始,创建数据库交互层代码是底层框架的首要任务.常用的做法包括手动编码.Hibernate或者动软之类的代码生成器,而多数人忽略了.Net环境下VS提供的两套非常好用的数据层工具. EF和Linq ...
- 经常用到的meta标签的整理
1.设置页面关键词<meta name="keywords" content="输入具体的关键词">2.设置页面的描述<meta name=& ...
- Linux 命令详解 - ps
完整文档 ps 命令用于显示命令执行瞬间的进程状态(Process Status).如果想动态查看进程状态可以使用 top 命令. 进程的概念 进程类型 前台进程:由终端初始化,可以通过命令行进行交互 ...
- 16/7/11_PHP-文件系统
读取文件内容 PHP具有丰富的文件操作函数,最简单的读取文件的函数为file_get_contents,可以将整个文件全部读取到一个字符串中. $content = file_get_contents ...
- 学习：多项式算法----FWT
FWT也称快速沃尔什变换,是用来求多项式之间位运算的系数的.FWT的思想与FFT有异曲同工之妙,但较FFT来说,FWT比较简单. 前言 之前学习FFT(快速傅里叶变换)的时候,我们知道FFT是用来快速 ...