插入元素

<!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的更多相关文章

  1. HTML DOM基础知识

    HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...

  2. Javascript DOM基础（一）概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  3. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  4. js入门——Dom基础

    DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...

  5. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  6. DOM基础（四）

    每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...

  7. DOM基础（二）

    在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...

  8. BOM基础 计时器 定时器 DOM 基础

    -------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...

  9. 第五讲 DOM基础

    DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...

  10. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

随机推荐

  1. 关闭Eclipse的控制台console自动跳出

    一.背景 在eclipse中进行开发,尤其是在后台有项目运行的时候,当有log或者错误需要打印到console中时,控制台就会被自动弹出,恰好这时候你又在编写代码,就会感觉瞬间想杀人,下面我们就来分享 ...

  2. [Android Pro] Java进阶学习:jar打包详解

    jar文件听说过吗,没有?或者陌生!好,没关系,这就是我们的第一站:打包发布. 为什么会有这个玩意呢,首先,这是jar的全称:JavaTM Archive (JAR) file,是的,就是java存档 ...

  3. 一分钟可知css3版大白源码

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. C#资源文件管理

    1.右键项目点属性; 2.点资源项,添加资源下拉框的添加现在文件,如下图: 3.直接上代码获取并复制到指定文件夹下: private void button1_Click(object sender, ...

  5. 直接放个DB2 SQL STATEMENT大全好了！

    SQL statements   This topic contains tables that list the SQL statements classified by type. SQL sch ...

  6. oracle数据库出现“批处理中出现错误: ORA-00001: 违反唯一约束条件”解决方法

    最近使用oraclede impdp工具全库导入数据库时,在数据库里面使用出现如下情况. SQL state : 违反唯一约束条件 (GDXAORCL.SYS_C0055359) ; nested e ...

  7. c++ 的 static_cast

    http://www.cnblogs.com/pigerhan/archive/2013/02/26/2933590.html #include "Person.h" #inclu ...

  8. 攻城狮在路上（壹） Hibernate（四）--- 对象标识符(OID)生成机制

    Hibernate使用对象标识符(OID)来建立内存中对象和数据库表中记录的对应关系,对象的OID和数据库的主键对应.为了保证OID的唯一性和不可变性,应该让Hibernate来为OID赋值.Hibe ...

  9. B树算法与实现 （C语言实现）

    B树的定义 假设B树的度为t(t>=2),则B树满足如下要求:(参考算法导论) (1)  每个非根节点至少包含t-1个关键字,t个指向子节点的指针:至多包含2t-1个关键字,2t个指向子女的指针 ...

  10. Zero Copy 简介

    转自:http://blog.csdn.net/zzz_781111/article/details/7534649 许多web应用都会向用户提供大量的静态内容,这意味着有很多data从硬盘读出之后, ...