<!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时出现Please make sure you have the correct access rights and the repository exists.问题已解决。

    使用git时,出现Please make sure you have the correct access rights and the repository exists.问题已解决. 今天我在使用 ...

  2. Ubuntu软件更新时出错问题解决

    apt-get instal update 提示:错误,无法解析域名等等之类的 网上解决办法一大堆,先别急着用网上的方法,来检查检查系统是否有网络连接 网络图标显示网络连接,等等,别被表面迷惑了,命令 ...

  3. Kali Linux信息收集工具全集

    001:0trace.tcptraceroute.traceroute 描述:进行路径枚举时,传统基于ICMP协议的探测工具经常会受到屏蔽,造成探测结果不够全面的问题.与此相对基于TCP协议的探测,则 ...

  4. jython实现java运行python代码

    Jython是一种完整的语言,而不是一个Java翻译器或仅仅是一个Python编译器,它是一个Python语言在Java中的完全实现.最近的一个项目需要将python代码转换成java实现,所以用了一 ...

  5. 【Java并发编程】：加锁和volatile变量

    加锁和volatile变量两者之间的区别: 1.volatile变量是一种稍弱的同步机制在访问volatile变量时不会执行加锁操作,因此也就不会使执行线程阻塞,因此volatile变量是一种比syn ...

  6. Nginx配置访问权限

    基于IP配置Nginx的访问权限 Nginx配置通过两种途径支持基本访问权限的控制,其中一种是由HTTP标准模块ngx_http_access_module支持的,通过IP来判断客户端是否拥有对Ngi ...

  7. 什么是Java序列化？为什么序列化？序列化有哪些方式？

    先普及一下,计算机中无法识别一个基本单元[字节]来表示,必须经过“翻译”才能让计算机理解人类的语言,这个翻译过程就是[编码],通常所说的字符转换为字节.  有I/O的地方机就会涉及编码,现在几乎所有的 ...

  8. Leetcode 647. Palindromic Substrings

    Given a string, your task is to count how many palindromic substrings in this string. The substrings ...

  9. 微信公众号H5支付

    微信支付说明1.统一下单接口 统一支付接口: url: https://api.mch.weixin.qq.com/pay/unifiedorder 目的:通过此接口来创建预支付订单,获取订单支付需要 ...

  10. ABP实战--项目结构

    学习完毕With ASP.NET Core & Entity Framework Core Part-1及Part-2后,只实现了基本的功能,使用该工程继续学习ABP的更多功能. 更改项目结构 ...