1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点。
比如:appendChild(newchild)括号里可以是创建的标签var newchild = document.createElement
 
2.insertBefore() 方法:
可在已有的字节点前中插入一个新的子节点。比如:insertBefore(newchild,rechild)
参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点
 
3.相同之处:插入子节点。
 
4.不同之处:appendChild方法是在父节点中的字节点的末尾添加新的节点(相对于父节点来说)。
insertBefor方法是在已有的节点前添加新的节点(相对于子节点来说的)
 
HTML代码:
<input type="button" value="增加" id="btn" />
<ul id="ul">
<li>第一个</li>
<li>第二个</li>
</ul>

JS 代码:

my$("btn").onclick = function () {
//创建一个元素标签
var li = document.createElement('li');
//给元素设置内容
li.innerText = ('新增一个内容');
// 在父元素的后面添加
my$('ul').appendChild(li);
} my$("btn").onclick = function () {
//创建一个元素标签
var li = document.createElement('li');
//给元素设置内容
li.innerText = ('新增一个内容');
// setInnnerText(li,'增加的');
my$('ul').insertBefore(li, my$('ul').lastElementChild);
//第一个参数 添加的内容 第二个参数是在那个位置前面 添加
}
 

js appendChild与insertBefore 区别和用法的更多相关文章

  1. js中!和!!的区别及用法

    js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值,1.!可将变量转换成boolean类型,null.undefined和空字符串取反都为false,其 ...

  2. js 各种循环的区别与用法(for in,forEach,for of)

    1,forEach循环   不能跳过或者终止循环 const a = ["a","ss","cc"] a.dd="11" ...

  3. js便签笔记(3)——切记:appendChild()、insertBefore()是移动element节点!

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

  4. js插入节点appendChild和insertBefore

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

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

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

  6. appendChild append insertBefore prepend

      CreateTime--2017年11月2日16:57:59 Author:Marydon appendChild()与append() insertBefore()与prepend()区别与联系 ...

  7. angularjs中provider,factory,service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  8. (转)appendChild()、insertBefore()是移动element节点!

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

  9. IE和firefox火狐在JS、css兼容区别

    1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了. ...

随机推荐

  1. jenkins 学习记录1

    主题 以前自己做些小玩意儿比如博客(http://blogv3.labofjet.com/)的时候,在远程服务器上的tomcat发布工程用的是目录的结构,而不是war.原因很简单.用目录结构的话每次只 ...

  2. Ubuntu16.04安装之后的几个设置

    Ubuntu16.04安装之后的几个设置 Ubuntu16.04界面很漂亮,但是安装之后,需要做如下几个简单的设置,这样用的时候会更加顺畅. 1.中文支持 在右上角有一个齿轮,点击->Syste ...

  3. Bootstrap 学习资料

    1.Bootstrap中文文档 2.Bootstrap3.1.1 DEMO 3.Bootstrap教程 4.Sco.js--Bootstrap javascript组件的增强版 如果,您认为阅读这篇博 ...

  4. 【转】Spring事务介绍

    1. 事务的特性:ACID 原子性(Atomicity):事务是一个原子操作,由一系列动作组成.事务的原子性确保动作要么全部完成,要么完全不起作用. 一致性(Consistency):一旦事务完成(不 ...

  5. centos7使用frabric自动化部署LNMP

    1.创建lnmp.py文件 $ vim lnmp.py ------------------------> #!/usr/bin/env python from fabric.colors im ...

  6. 1-5 构建官方example-Windows平台

    https://github.com/facebook/react-native https://github.com/facebook/react-native.git  https://githu ...

  7. 四.python数据类型,语句

    Python基础 阅读: 120476 Python是一种计算机编程语言.计算机编程语言和我们日常使用的自然语言有所不同,最大的区别就是,自然语言在不同的语境下有不同的理解,而计算机要根据编程语言执行 ...

  8. linux上mysql安装

    所有平台的MySQL下载地址为: MySQL 下载. 挑选你需要的 MySQL Community Server 版本及对应的平台. MySQL - MySQL服务器.你需要该选项,除非你只想连接运行 ...

  9. Docker学习笔记_下载镜像更换为国内源,实现快速下载image

    1.编辑/etc/docker/daemon.json,增加下面内容: { "registry-mirrors": ["https://registry.docker-c ...

  10. 数字图像处理实验(15):PROJECT 06-02,Pseudo-Color Image Processing 标签: 图像处理MATLAB 2017-05-27 20:53

    实验要求: 上面的实验要求中Objective(实验目的)部分是错误的. 然而在我拿到的大纲中就是这么写的,所以请忽视那部分,其余部分是没有问题的. 本实验是使用伪彩色强调突出我们感兴趣的灰度范围,在 ...