<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()的区别的更多相关文章

  1. js插入节点appendChild和insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  2. 《JavaScript+DOM编程艺术》的摘要（四）appendChild与insertBefore的区别

    基本知识点: // 1.js里面为什么要添加window.onload=function (){} // 保证html文档都加载完了,才开始运行js代码,以防html文档没有加载完,找不到相应的元素 ...

  3. append()、appendChild() 和 innerHTML 的区别

    概念和区别:append() 可以同时传入多个节点或字符串,没有返回值: 据说 append 还是试用期的方法,有兼容问题,(但我用了暂时火狐,谷歌,iE都能使用). https://develope ...

  4. JQuery之append和appendTo的区别，还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  5. 关于appendChild和insertBefore appendTo()和append

    appendChild和insertBefore(原生js) appendTo()和append(jquery)

  6. js便签笔记（3）——切记：appendChild()、insertBefore()是移动element节点！

    appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1"> & ...

  7. JS(JavaScript)插入节点的方法appendChild与insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  8. （转）appendChild()、insertBefore()是移动element节点！

    原文地址 appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1"& ...

  9. 【前端】js中new和Object.create()的区别

    js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...

随机推荐

  1. python中用os.walk查找全部的子文件

    import os import shutil # 要遍历查找的文件所在的父文件夹 trajectory_filename =r"D:\mapping" # 要粘贴到的目标文件夹 ...

  2. 使用debugger在程序中加入断点

    使用debugger在程序中加入断点 版权声明:本文为博主原创文章,未经博主允许不得转载. 我们可以在程序中加入debugger语句,这样Firefox的调试工具会停留在这条语句上,代码也暂停执行,和 ...

  3. Android中国官网资源网站

    现在android开发者官网在中国有中文版已经不是太大的新闻,为了平时查询资料和学习方便,记录如下. PS:建议用Google浏览器浏览,你懂的!! https://developers.google ...

  4. Eclipse总是自动跳到ThreadPoolExecutor

    出现这种状况是因为Eclipse默认开启挂起未捕获的异常(Suspend execution on uncaught exceptions),只要关闭此项就可以了.解决方法:在eclipse中选择Wi ...

  5. STM32 在串口通信时运用MODBUS协议

    最近一个项目用到了MODBUS协议,就学习了一下,这里做一下记录以免后续忘记. 要用到MODBUS肯定要先知道是MOBUS协议,这里呢我们就又要先理解协议的含义了. 所谓的协议是什么?就是互相之间的约 ...

  6. Vagrant 手册之 Provisioning - 概述

    原文地址 通过 Vagrant 中的 provisioner 配置程序,可以在使用 vagrant up 启动虚拟机时,在虚拟机上执行安装软件.更改配置等操作. box 通常是通用的,而每个项目总有自 ...

  7. EL表达式（二）运算符

    运算符"."和"[]": "."能做的"[]"也能做,"[]"能做的"."不一定 ...

  8. Songwriter CF1252-E(贪心)

    题意: 已知一个序列a,问能否将a映射到序列b,使得相邻元素之间的大小关系不变(三种),且相邻元素不能相差超过k,且每个元素范围在[L,R]内.如果能,求字典序最小的b. 思路: 可以设b[1]的范围 ...

  9. linux + eclipse + cdt 报错undefined reference......好麻烦的，这位大牛给出的方法可行，特此MARK！！！！

    http://bbs.csdn.net/topics/390239632 kerosun kerosun 等级: 结帖率:96.92% 楼主 发表于: 2012-10-11 12:00:51   比如 ...

  10. 函数式编程filter和map的区别

    # b = filter(lambda x:x>5,[1,2,3,4,5,6,7]) # print(list(b)) def filters(x): if x > 5: return x ...