DOM基础2
插入元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oU1=document.getElementById('ul1');
var oTxt=document.getElementById('txt1'); oBtn.onclick=function(){
var oLi=document.createElement('li');
var aLi=oU1.getElementsByTagName('li'); oLi.innerHTML=oTxt.value;
//父级.appendChild（子节点） ，子节点添加到了父级末尾 if(aLi.length>0)
{
oU1.insertBefore(oLi,aLi[0])
}
else{
oU1.appendChild(oLi);
} }
}
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1"> </ul>
</body>
</html>
删除元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var aA=document.getElementsByTagName('a');
var oU1=document.getElementById('ul1'); for(var i=0;i<aA.length;i++){
aA[i].onclick=function(){
oU1.removeChild(this.parentNode); }
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>dssd <a href="javascript:;">删除</a> </li>
<li>436d <a href="javascript:;">删除</a> </li>
<li>d反对分割的ssd <a href="javascript:;">删除</a> </li>
<li>ds导师sd <a href="javascript:;">删除</a> </li>
</ul>
</body>
</html>
DOM基础2的更多相关文章
- HTML DOM基础知识
HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...
- Javascript DOM基础（一）概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
- js入门——Dom基础
DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...
- 第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- DOM基础（四）
每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...
- DOM基础（二）
在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...
- BOM基础 计时器 定时器 DOM 基础
-------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...
- 第五讲 DOM基础
DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
随机推荐
- September 27th 2016 Week 40th Tuesday
Friends are lost by calling too often and calling seldom. 交往过密过疏,都会失去朋友. Please mind your own busine ...
- js中我的注释规范
模块功能描述说明: /** * ------------------------------------------------------------------ * 模块描述说明 * ------ ...
- weblogic无需用户名密码启动Server
创建了Server-0. 但每次启动需要手工输入管理账户和密码. 并不方便. 现在要让它自动输入并启动.一. 新建security文件夹 # cd $WEBLOGIC_HOME/servers/Ser ...
- 已有a,b两个链表，每个链表中的结点包括学号，成绩。要求把两个链表合并。按学号升序排列.
#include <stdio.h>#define SIZE sizeof(struct student)struct student{ long num; flo ...
- js函数的几个特殊点
在ECMAScript中,Function(函数)类型实际上是对象.每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象 ...
- Linux 通过os进程pid找到端口号
[root@xxxx conf]# netstat -lutpn|grep tcp /java tcp /java tcp /java tomcat 监听的一些端口
- EF – 4.CRUD与事务
5.6.1 <Entity Framework数据更新概述> 首先介绍Entity Framework实现CRUD的基本方法,接着介绍了如何使用分部类增强和调整数据实体类的功能与行为特性 ...
- Bitmap在Java中的实现和应用
>>40亿数据排序问题 给定一个最多包含40亿个随机排列的32位整数的顺序文件,找出一个不在文件中的32位整数(在文件中至少缺失这样一个数——为什么?).在具有足够内存的情况下,如何解决该 ...
- ***LINUX添加PHP环境变量：CentOS下将php和mysql命令加入到环境变量中
CentOS系统下如何将PHP和mysql命令加入到环境变量中,在Linux CentOS系统上 安装完php和MySQL后,为了使用方便,需要将php和mysql命令加到系统命令中,如果在没有添加到 ...
- OCJP(1Z0-851) 模拟题分析（三）over
Exam : 1Z0-851 Java Standard Edition 6 Programmer Certified Professional Exam 以下分析全都是我自己分析或者参考网上的,定有 ...