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.掌 ...
随机推荐
- EF性能调优
首先说明下: 第一次运行真是太慢了,处理9600多个员工数据,用了81分钟!! 代码也挺简单,主要是得到数据-->对比分析-->插入分析结果到数据库.用的是EF的操作模式. public ...
- 43个优秀的Swift开源项目
作为一门集百家之长的新语言,Swift拥有着苹果先天的生态优势,而其在GitHub上各种优秀的开源项目也层出不穷.本文作者@SwiftLanguage从2014年6月苹果发布Swift语言以来,便通过 ...
- jquery.query.js 插件（示例及简单应用）
帮助文档 var url = location.search; > "?action=view§ion=info&id=123&debug&te ...
- 关于python性能提升的一些方案(上)
一.函数调用优化(空间跨度,避免访问内存) 1.大数据求和,使用sum a = range(100000) %timeit -n 10 sum(a) 10 loops, best of 3: 3.15 ...
- 【PHP&&MySQL详解】
PHP和MySQL是一对好搭档,PHP中有一个很大的扩展库专门针对对MySQL的操作.当然,作为一个PHP程序员,首先对MySQL的增删查改要非常熟悉才行. MySQL数据库的连接数大概在6w个左右, ...
- AIX扩展文件系统的大小
由于AIX系统空间不够需要增加硬盘,希望增加文件系统的空间,折腾了好几天怎么都不能扩展文件系统的空间,原来是把硬盘加错了卷组 首先,确定文件系统所在的LV /dev/datalv 270.0 ...
- CentOS 6.5下samba服务器搭建与配置
转自:http://www.centoscn.com/CentosServer/ftp/2014/1023/3989.html 写在前面: 首先关闭防火墙:service iptables stop, ...
- Java Data Type
官方文档:http://docs.oracle.com/javase/tutorial/java/nutsandbolts/datatypes.html 转载地址:http://blog.csdn.n ...
- 报错:1130-host ... is not allowed to connect to this MySql server 开放mysql远程连接 不使用localhost
执行如下命令报错 mysql -uroot -h${hostIp} -p Enter password:********* ERROR (HY000): Host '$hostIp' is not a ...
- JAVA安装，环境变量配置
JAVA环境变量设置 PATH %JAVA_HOME%\bin JAVA_HOME D:\ProgramFiles\Java\jdk1.6.0_10 CLASSPATH .;%JAVA_HOME%\l ...