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 ...
随机推荐
- html、css、js分工，内核，html头，html表单
html:内容css:样式js:交互 内核 浏览器控制台输入navigator.userAgent,回车显示出内核"Mozilla/5.0 (Windows NT 6.1; WOW64) A ...
- 获取相应头信息Response Headers的内容类型Content-Type
Content-Type内容类型,也是键值对的形式: 我们在代码中获取: package com.zhi.httpClient2; import org.apache.http.Header; imp ...
- Jupyter Notebook 快捷键（基本）
Jupyter Notebook 快捷键 Jupyter Notebook 有两种键盘输入模式.编辑模式,允许你往单元中键入代码或文本:这时的单元框线是绿色的.命令模式,键盘输入运行程序命令:这时的单 ...
- Note-Git：Git 笔记
ylbtech-Note-Git:Git 笔记 1.返回顶部 · Git 分支管理: 主干/master.热修正/hotfix.预生产/release.开发develop.个人1(个人.小团队)/f ...
- c++虚函数与重载
class base{ public: virtual void f(int n){ cout << "base"<<endl; } }; class De ...
- (appium+python)UI自动化_07_app UI自动化实例【叮咚搜索加车为例】
前言 初学UI自动化的小伙伴,在配置好appium+python自动化环境后,往往不知道如何下手实现自动化.小编在初期学习的时候也有这种疑惑,在此以叮咚买菜app-搜索加车为实例,展示下appium是 ...
- php和java的优势
现在市场上的电子商务软件基本上可归结为两大阵营,即PHP阵营和Java阵营.但对接触电子商务不久的用户来说,看到的往往只是它们的表相,只是明显的价格差异,却很难看出它们之间的实际差异.下面我们就为大家 ...
- 标准标签库JSTL(JSP Standard Tag Library)
1, 核心标签(最常用, 最重要的) 表达式控制标签 out 输出常量 value---直接赋值 输出变量 default---默认值 escapeXml---控制转义字符(默认为true, 如果需要 ...
- python参数的介绍
一.函数1.为什么要使用函数?减少代码的冗余2.函数先定义后使用(相当于变量一样先定义后使用)3.函数的分类:内置函数:python解释器自带的,直接拿来用就行了自定义函数:根据自己的需求自己定义的函 ...
- MFC---导出 Excel 方法
本方法通过Excel驱动写入 请添加头文件 #include"afxdb.h" 第一步创建Excel文件 安装驱动 CString FileName = L"first. ...