<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. webApp 页面布局

    1. 流式布局 概念:流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法:布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽然可以让各种屏幕适配,但是显 ...

  2. django缓存优化（三）

    This should give you a feel for how this module operates:: import memcache mc = memcache.Client(['12 ...

  3. mysql 之 frm+ibd文件还原data

      此方法只适合innodb_file_per_table          = 1 当误删除ibdata 该怎么办? 如下步骤即可恢复: 1.准备工作 1)准备一台纯洁的mysql环境[从启动到现在 ...

  4. HDU 5632 Rikka with Array [想法题]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5632 ------------------------------------------------ ...

  5. Jquery append() 添加多次同个元素时，只有一次作用，如何解决？

    这是一个简单的table <table id="mytable"> <!-- 这里将要动态加载tr数据 --> </table> 这是一个模版t ...

  6. ASP.NET MVC Filter过滤机制（过滤器、拦截器）

    https://blog.csdn.net/knqiufan/article/details/82413885 本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/ ...

  7. MySQL 查询性能优化 - EXPLAIN 命令

    查询优化的官方文档在 这里. EXPLAIN 的输出格式 译文 1. MySQL 架构 1.1 MySQL 的简化架构 MySQL 可以简单的分为三层:连接层.服务层.存储引擎层.其中服务层包含了 M ...

  8. Learning OSG programing---Multi Camera in one window 在单窗口中创建多相机

    在学习OSG提供的例子osgCamera中,由于例子很长,涉及很多细节,考虑将其分解为几个小例子.本文介绍实现在一个窗口中添加多个相机的功能. 此函数接受一个Viewer引用类型参数,设置图形上下文的 ...

  9. python包的补充

    1.包A和包B下有同名模块也不会冲突,如A.a与B.a来自俩个命名空间 2.常见目录结构 import os 2 os.makedirs('glance/api') 3 os.makedirs('gl ...

  10. ArrayBlockingQueue使用

    阻塞与非阻塞: 阻塞: 阻塞调用是没有获得资源则挂起进程,被挂起的进程进入休眠状态,调用的函数只有在得到结果之后才返回,进程继续. 对象是否处于阻塞模式和函数是不是阻塞调用有很强的相关性,但并不是一一 ...