<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. PHP实现多服务器SESSION共享

    为什么要session共享? 现在稍微大一点的网站基本上都有好几个子域名,比如www.feiniu.com, search.feiniu.com, member.feiniu.com,这些网站如果需要 ...

  2. Spring Boot 读取外部的配置文件

    Spring Boot 程序会按优先级从下面这些路径来加载application.properties 或者 application.yml 配置文件 jar包同级目录下的/config目录jar包同 ...

  3. python2.7+RobotFramework的UI自动化环境搭建

    robotFramework是一种比较常见的自动化测试框架,此篇记录环境搭建 目录 1.软件准备 2.执行安装 1.软件准备 python-2.7.15.amd64.msi              ...

  4. vue双花括号的使用

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. stl vector创建二维数组

    vector<vector<); for (auto it = v.begin(); it != v.end(); it++) { ; (*it).reserve();//预留空间为5,但 ...

  6. Web控件LinkButton

    <asp:LinkButton ID="" runat="server" ></asp:LinkButton> 编译后就变成了回发事件 ...

  7. No-sql之redis常用命令

    转自:http://blog.csdn.net/nicewuranran/article/details/51793760 No-SQL之Redis 介绍 Redis是一种基于内存存储的key-val ...

  8. Runnable、Callable、Future、FutureTask的区别

    转自:https://blog.csdn.net/jdsjlzx/article/details/52912701 FutureTask既是Future.Runnable,又是包装了Callable( ...

  9. java排序算法概述

    一.概述 1.排序也称排序算法(Sort Algorithm),排序是将一组数据,依指定的顺序进行排列的过程. 2.排序的分类: 1) 内部排序: 指将需要处理的所有数据都加载到内部存储器中进行排序. ...

  10. MongoDB数据库-基础篇

    一使用mongodb 1.常用的命令 show dbs    显示数据库列表 use dbname    进入dbname数据库,大小写敏感,没有这个数据库也不要紧 show collections ...