6.DOM对HTML元素的增删改操作

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>节点的增删改操作</title>
<script type="text/javascript">
function createNode(){
//创建一个li元素
var li = document.createElement("li");
li.innerHTML = "郑州";//添加内容
var ul = document.getElementById("city");
ul.appendChild(li);
}

function copyNode(){
//复制第一个li
var ul = document.getElementById("city");
var li1 = ul.firstChild.nextSibling;
var newli = li1.cloneNode(true);
ul.insertBefore(newli,li1);
}

function delNode(){
//删除最后一个li
var ul = document.getElementById("city");
var lastli = ul.getElementsByTagName("li");
if(lastli.length>0){
ul.removeChild(lastli[lastli.length-1]);
}
}
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
</ul>
<input type="button" value="创建li节点" onclick="createNode()"/>
<input type="button" value="复制第一个li节点" onclick="copyNode()"/>
<input type="button" value="删除第一个li节点" onclick="delNode()"/>
</body>
</html>

时间: 2024-10-27 06:39:44

6.DOM对HTML元素的增删改操作的相关文章

DOM访问HTML元素的方式,DOM访问表单控件的常用属性和方法,DOM访问列表框、下拉菜单的常用属性,DOM访问表格子元素的常用属性和方法,DOM对HTML元素的增删改操作

DOM访问HTML元素的方式 为了动态地修改HTML元素,须先访问HTML元素.DOM主要提供了两种方式来访问HTML元素: 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素. 利用节点关系访问HTML元素.常用的属性和方法如下: parentNode 返回当前节点的父节点 previousSibling 返回当前节点的前一个兄弟节点 nextSibling 返回当前节点的后一个兄弟节点 childNodes 返回当前节点的

HTML DOM(二):节点的增删改查

上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这些节点进行增删改查的操作. 获取(R) 1. getElementById(id).getElementsByName(name).getElementsByTagName(tagName),这三种方法都会忽略文档的结构. getElementById(id):通过id获取元素节点,如果页面上含有多

JS中对数组元素进行增删改移

在js中对数组元素进行增删改移,简单总结了一下方法: 方法 说明 实例 push( ); 在原来数组中的元素最后面添加元素 arr.push("再见58"); unshift( ); 在原来数组中的元素最前面添加元素 arr.shift("你好58"): pop(); 移除数组中最后面的一个元素 arr.pop(); shift(); 移除数组中最前面的一个元素 arr.shift(); concat(); 拼接两个数组中的元素 (哪个数组在前面,拼接后它的元素就在

DOM节点增删改操作

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM节点增删改操作</title> </head> <body> <p id="s"><span id="ss">b</span><a id="sss">b<

JavaScript--DOM增删改操作

JavaScript使用DOM操作节点来进行增删改操作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript操作DOM节点</title> <script type="text/javascript"> var flag = "帐号"; var flag1 = 0; funct

easyui学习笔记1—增删改操作【转载】

最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现这个奇怪的mysql语法,如下 alter table student change id id int auto_increment; 这句是在student表已经建好的情况下来修改字段id为自增列,奇怪的是为嘛change id id,并且后面还要带上id的类型int? 2.html5标记 如何

Jquery easyui开启行编辑_增删改操作及新增就能编辑

下面这个是一个单独的js文件,可以直接在页面引入他就可以用了 主要有三种方式实现编辑模式增删改操作 1.直接双击选中编辑 2.选中行点击修改按钮编辑 3.右键选择相关的操作 可能中间有部分功能没有实现 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!-- 引入自定义的js文件 --> <script type="t

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

一.winform弹出警告框是否进行增删改操作 第一个参数是弹出窗体显示的内容,第二个参数是标题,第三个参数是该弹窗包含确定和取消按钮. 返回的是一个枚举类接收一下. 再进行判断,如果点的是确定按钮,再进行下一步的增删改操作. 二.记事本的制作 1.菜单工具栏MenuStrip-插入标准项 2.TextBox -显示部分 小箭头 MultiLine 选中多行 Dock属性占满. 3.功能 - 撤销 - 剪切 - 粘贴 - 复制 - 删除 - 全选 - 时间 - 查找 单独做一个窗体点击打开 把主

详解连接SQL Server数据库的方法,并使用Statement接口实现对数据库的增删改操作

总结一下,连接SQL Server数据库需要以下几个步骤: 1. 导入驱动Jar包:sqljdbc.jar 2. 加载并注册驱动程序 3. 设置连接路径 4. 加载并注册驱动 5. 连接数据库 6. 操作数据库 7. 关闭连接 代码如下: ******************连接数据库******************* 1 package zj6_Test; 2 import java.sql.*; 3 public class Zj6_3 { 4 /** 5 * 使用Statement接口