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. Spring项目的发展历史和SpringBoot的发展历史

    Spring项目的发展历史和SpringBoot的发展历史 在Java做web应用的服务端开发领域,一直存在着两套技术体系,一套是Sun公司官方推出的JavaEE,另一套是Spring.Spring ...

  2. redis实现发布订阅

    订阅者 #!/usr/bin/env python # -*- coding:utf-8 -*- import redis r = redis.Redis(host='192.168.11.119') ...

  3. json_encode和json_decode和isset和array_key_exists

    1.json_decode() json_decode — 对 JSON 格式的字符串进行编码         说明 mixed json_decode ( string $json [, bool ...

  4. python子进程模块subprocess详解与应用实例 之三

    二.应用实例解析 2.1 subprocess模块的使用 1. subprocess.call >>> subprocess.call(["ls", " ...

  5. SpringMVC 课程第一天

    SpringMVC第一天   框架课程 1. 课程计划 第一天 1.SpringMVC介绍 2.入门程序 3.SpringMVC架构讲解 a) 框架结构 b) 组件说明 4.SpringMVC整合My ...

  6. 面试题:SSH项目总结 !=!=未看 没用

    阿玻罗软件(上海)有限公司已经两年了.中国银行营销系统,到民生银行小微信贷工厂建设.再到交通银行ioffice移动平台项目.以前所学的SSH好多都用不上 公司的框架.都是负责项目的贷款查找模块开发和测 ...

  7. 用conda创建一个tensorflow 虚拟环境

    创建your——user——name = tensorflow 的虚拟环境 xinpingdeMacBook-Pro:~ xinpingbao$ conda create -n tensorflow ...

  8. FutureTask子任务取消执行的状态判断

    示例代码可以从github上获取 https://github.com/git-simm/simm-framework.git 一.业务场景: 系统中存在多种场景并发操作事务执行时互锁的情况,导致任务 ...

  9. 认识HttpContext.User

    HttpContext.User,即IPrincipal .net源代码 namespace System.Security.Principal { /// <summary>Define ...

  10. HttpAnalyzerStdV7安装教程

    相关链接:HttpAnalyzerStdV7使用教程 安装步骤:   1.解压压缩包   2.双击运行安装文件   3.根据向导提示点击Next   4.选择接受协议,点击Next   5.修改安装路 ...