<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script>
function create() {
var mu = document.getElementById('u');
var ele = document.createElement('li');
ele.innerHTML = '4';
//mu.appendChild(ele); //在末尾追加一个元素
//mu.insertBefore(ele,mu.firstChild.nextSibling); //在指定位置插入元素
//mu.replaceChild(ele,mu.firstChild.nextSibling); //指定位置替换元素
}

function copy() {
var mu = document.getElementById('u');
var ele = mu.firstChild.nextSibling.cloneNode(false);
ele.innerHTML = 'a';
mu.appendChild(ele);
}

function remove() {
var mu = document.getElementById('u');
var ele = mu.firstChild.nextSibling;
mu.removeChild(ele);
}
</script>
</head>

<body>
<ul id="u">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<button value="1" onclick="create()">create</button><br />
<button value="2" onclick="copy()">copy</button><br />
<button value="3" onclick="remove()">remove</button>
<hr />

</body>

</html>

DOM增删改操作的更多相关文章

  1. JavaScript--DOM增删改操作

    JavaScript使用DOM操作节点来进行增删改操作 <!DOCTYPE html> <html> <head> <meta charset="U ...

  2. C# winform窗体设计-对数据库执行增删改操作

    对于学习数据库的人来说,数据库的增删改可谓是最基本的了(小编其实也只是一个小白=-=),这篇文章,小编将于大家讲解数据库增删改操作 在执行数据库增删改的时候主要使用的:Command 类       ...

  3. Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...

  4. OracleHelper(对增删改查分页查询操作进行了面向对象的封装，对批量增删改操作的事务封装)

    公司的一个新项目使用ASP.NET MVC开发,经理让我写个OracleHelper,我从网上找了一个比较全的OracleHelper类,缺点是查询的时候返回DataSet,数据增删改要写很多代码(当 ...

  5. [转]Jquery easyui开启行编辑模式增删改操作

    本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...

  6. [ruby on rails] 跟我学之(3)基于rails console的查增删改操作

    本章节展开对model的介绍:包括查增删改操作.紧接着上面一节<[ruby on rails] 跟我学之HelloWorld> 创建模型 使用命令创建模型 创建表post,默认自带两栏位 ...

  7. Linq to SQL 简单的增删改操作

    Linq to SQL 简单的增删改操作. 新建数据库表tbGuestBook.结构如下: 新建web项目,完成相应的dbml文件.留言页面布局如下 <body> <form id= ...

  8. Hibernate双向关联的增删改操作的属性

    双向关联关系下的增删改操作的属性                    1.cascade属性:  eg:<set name = "emps" cascade="s ...

  9. 【2017-05-02】winform弹出警告框是否进行增删改操作、记事本制作、对话框控件和输出输入流

    一.winform弹出警告框是否进行增删改操作 第一个参数是弹出窗体显示的内容,第二个参数是标题,第三个参数是该弹窗包含确定和取消按钮. 返回的是一个枚举类接收一下. 再进行判断,如果点的是确定按钮, ...

随机推荐

  1. 把本地git仓库的项目上传到远程仓库

    之前在学校实验室服务器上建了一个git远程仓库,存放我写的express项目代码.后来由于出去实习,就无法访问那个远程仓库了,因为它在校园网内. 还好我的笔记本中有这个项目完整的本地仓库,于是我就试着 ...

  2. cobbler 自定义私有yum源

    目的:为客户端自动添加上yum源 以下以openstack源为例 1.新建私有yum源[root@localhost ~]#cobbler repo add --name=openstack-mita ...

  3. django.db.utils.InternalError: (1050, "Table 'tb_content' already exists")

    在goods应用里面写了tb_content数据表的模型类(不该写在这里的),进行了数据迁移,还导入了数据. 在contents应用里也写了tb_content数据表的模型类(应该写在这里的), 解决 ...

  4. Hive Cli相关操作

    landen@Master:~/UntarFile/hive-0.10.0$ bin/hive --database 'stuchoosecourse' -e 'select * from hidde ...

  5. 《Android应用性能优化》1——代码

    1.Java代码优化 1.1 代码执行 通常情况下,不必看应用的字节码.在平台是Android2.2(Froyo)和更高版本的情况下尤其如此,因在Android2.2中引入了实时(JIT)的编译器.D ...

  6. Android 开发工具类 05_Logcat 统一管理类

    Logcat 统一管理类: 1.默 认tag 的函数: 2.自定义 tag 的函数. import android.util.Log; // Logcat 统一管理类 public class L { ...

  7. redis 安装报错 jemalloc/jemalloc.h: No such file or directory。

    对于redis安装的这个错误,我在博客redis 安装 与错误解决办法最后有提及,但是网上大部分文章的对这个问题的解答都是有误的.所以在这里单列出来. 错误内容: jemalloc/jemalloc. ...

  8. [LeetCode]LinkedList Cycle

    题目说明 Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without usi ...

  9. 使用Java设计验证码生成程序

    我们来设计一个简单的验证码生成程序:验证码一个由4位的数字.字母随机组合而成图像,为了避免被光学字元识别(OCR,Optical Character Recognition)之类的程序识别出图片中的数 ...

  10. mysql/mariadb 数据库配置

    1.  启动mariadb systemctl start mariadb 2. 设置开机启动mariadb systemctl enable mariadb 一.修改用户密码,以root为例 1. ...