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. linux 修改openfiles

    使用ulimit -a 可以查看当前系统的所有限制值,使用ulimit -n 可以查看当前的最大打开文件数. 新装的linux默认只有1024,当作负载较大的服务器时,很容易遇到error: too ...

  2. Bootstrap教程目录

    1.Bootstrap 简介(Web前端CSS框架) 2.Bootstrap 学习资料 3.Bootstrap 入门 4.Bootstrap 概览 5.Bootstrap 栅格系统 6.Bootstr ...

  3. Oracle 中 over() 函数

    :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; m ...

  4. 转-使用wifi调试程序

    转自:http://www.cnblogs.com/sunzhenxing19860608/archive/2011/07/14/2106492.html 数据线丢了,不想花钱去买,在网上看了看,an ...

  5. 面试题:SpringMVC的工作流程

    SpringMVC是当今最主流的Web MVC框架,没有之一,要做一名合格的JavaWeb工程师,学好它势在必行! 与Struts2原理不同,SpringMVC是通过最基础最传统的servlet来实现 ...

  6. Installing R under Unix-alikes

    Linux上R的安装 可参考https://cran.r-project.org/doc/manuals/r-release/R-admin.html#Installing-R-under-Unix_ ...

  7. KMP算法细讲(豁然开朗)

    一.KMP算法是如何针对传统算法修改的 用模式串P去匹配字符串S,在i=6,j=4时发生失配: ---------------------------------------------------- ...

  8. Mybaties核心配置文件

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configurationPUBLIC &q ...

  9. Date3.19

    1.正则表达式的定义及使用2.Date类的用法3.Calendar类的用法========================================================1正则表达式的 ...

  10. Linux下为Eclipse安装hadoop插件

    前提条件:在Linux系统中已经安装好了jdk和hadoop 本文的安装环境:1.arch Linux 2. hadoop1.0.1本地伪分布模式安装  3. Eclipse 4.5 1. 下载Ecl ...