<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. vue2.0 之 douban （五）创建cell,media-cell组件

    1.组件cell 这里的cell分为三种样式,左侧带图标,不带图标,以及左侧带竖线的cell. 每一个组件都有一个底部边框: 这里我们采用了移动端1px像素问题的解决方法:父级元素设置相对定位,构建1 ...

  2. 1208C Magic Grid

    题目大意 给你一个n 让你用0~n^2-1的数填满一个n*n的正方形 满足每个数值出现一次且每行每列的异或值相等 输出任意一种方案 分析 我们发现对于4*4的正方形 0  1  2  3 4  5  ...

  3. mongo可视化工具adminMongo安装

    git环境搭建下载地址:https://git-scm.com/downloads 此处,安装环境为windows操作系统,所以选择windows版本下载一直下一步,直至安装完成找到安装git的目录下 ...

  4. Mac006--swithchosts安装

    Mac006--swithchosts安装 使用brew命令安装:brew cask install switchhosts 因为mac上,网络下载无法进行安装,所以应用brew命令安装. switc ...

  5. 3.创建线程的第二种写法,继承threading.Tread类,重写run方法

    #创建线程的第二种写法 #1.自定义一个类 #2.继承Thread #3.重写run()方法 import threading,time,random class MyThread(threading ...

  6. 《JAVA设计模式》之装饰模式(Decorator)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述装饰(Decorator)模式的: 装饰模式又名包装(Wrapper)模式.装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替 ...

  7. 【五一qbxt】day7-2 选择客栈

    停更20天祭qwq(因为去准备推荐生考试了一直在自习qwq) [noip2011选择客栈] 这道题的前置知识是DP,可以参考=>[五一qbxt]day3 动态规划 鬼知道我写的是什么emm 这道 ...

  8. java中位运算和移位运算详解

    一.位运算 (1)按 位 与 & 如果两个相应的二进制形式的对应的位数都为1,则结果为1,记为同1为1,否则为0.首先我们看一下对正数的运算        分别看一下正数和负数的具体运算步骤 ...

  9. 【JAVA】 03-Java中的异常和包的使用

    链接: 笔记目录:毕向东Java基础视频教程-笔记 GitHub库:JavaBXD33 目录: <> <> 内容待整理: 异常 异常和错误的发生和区别 异常:java运行期间发 ...

  10. 关于iframe跨页面设置高度

    注意:这两种方式不支持跨域使用 1.jQuery简单实现iframe的高度根据页面内容自适应的方法(加载后展示使用) 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $(" ...