【删除节点】

步骤：

① 找到对象

② 找到他的父对象 parentObj

③ parentObj.removeChild(子对象);

【例】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #div1{

            width: 300px;

            height: 300px;

            background: blue;

            border-bottom: 1px solid black;

        }

    </style>

    <script>

        function del(){

            var lis = document.getElementsByTagName("li");

            var lastLi = lis[lis.length-1];

            lastLi.parentNode.removeChild(lastLi);

        }

    </script>

</head>

<body>

    <input type="button" value="删除最后一个li" onclick="del();">

    <ul>

        <li>白羊</li>

        <li>金牛</li>

        <li>双子</li>

        <li>巨蟹</li>

    </ul>

</body>

</html>

【创建节点】

步骤：

① 创建对象

② 找到父对象 parentObj

③ parentObj.addChild(对象);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #div1{

            width: 300px;

            height: 300px;

            background: blue;

            border-bottom: 1px solid black;

        }

    </style>

    <script>

        function add(){

            //创建li

            var li = document.createElement("li");

            //创建文本节点

            var txt = document.createTextNode("海魔女");

            //插入文本节点到li

            li.appendChild(txt);

            //把li插入ul

            document.getElementsByTagName("ul")[0].appendChild(li);

        }

    </script>

</head>

<body>

    <input type="button" value="追加一个li" onclick="add();">

    <ul>

        <li>白羊</li>

        <li>金牛</li>

        <li>双子</li>

        <li>巨蟹</li>

    </ul>

</body>

</html>

Javascript 笔记与总结（2-10）删除节点，创建节点的更多相关文章

  1. Javascript 笔记与总结（2-11）暴力操作节点

    innerHTML 代表节点内的内容,能读能写 虽然不是 W3C 规定的标准,但是各浏览器都支持得很好 [例] <!DOCTYPE html> <html lang="en ...

  2. [Effective JavaScript 笔记]第22条：使用arguments创建可变参数的函数

    第21条讲述使用可变参数的函数average.该函数可处理任意数量的参数并返回这些参数的平均值. 如何创建可变参数的函数 1.实现固定元数的函数 书上的版本 function averageOfArr ...

  3. 创建节点--DOM树

    创建节点 快捷键:innerhtml outerhtml innertext outertext ==============创建节点方法有两种:============== <script s ...

  4. javascript数据结构与算法---二叉树（删除节点）

    javascript数据结构与算法---二叉树(删除节点) function Node(data,left,right) { this.data = data; this.left = left; t ...

  5. (转载)Javascript removeChild()不能删除全部子节点的解决办法

    在Javascript中,只提供了一种删除节点的方法:removeChild().removeChild() 方法用来删除父节点的一个子节点. 语法: parent.removeChild(thisN ...

  6. Javascript高级编程学习笔记（35）—— DOM（1）节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

  7. JavaScript对列表节点的操作：删除指定节点、删除最后一个节点、删除第一个节点、删除所有节点、增加节点

    使用菜鸟的运行环境直接测试:http://www.runoob.com/try/try.php?filename=tryjs_events <!DOCTYPE html> <html ...

  8. JavaScript笔记基础篇(二)

    基础篇主要是总结一些工作中遇到的技术问题是如何解决的,应为本人属于刚入行阶段技术并非大神如果笔记中有哪些错误,或者自己的一些想法希望大家多多交流互相学习. 1.ToFixed()函数 今天在做Birt ...

  9. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

随机推荐

  1. Lucene查询索引（分页）

    分页查询只需传入每页显示记录数和当前页就可以实现分页查询功能 Lucene分页查询是对搜索返回的结果进行分页,而不是对搜索结果的总数量进行分页,因此我们搜索的时候都是返回前n条记录 package c ...

  2. oracle 卸载步骤（图解）

    1.卸载第一步:点击开始菜单: 步骤阅读 2 2.点击Universal Installer来实现下面 步骤阅读 3 3.点击卸载产品后出现的内容: 步骤阅读 4 4.点击打开Oracle主目录下的O ...

  3. 使用MyEclipse Swing/Matisse

     经常使用JBuilder开发工具的人都知道,在JBuilder中开发Swing应用程序是比较方便的,虽然比不上曾经红遍一时的Visual Basic,但开发界面的工作确实被大大简化了.     JB ...

  4. Web service project中导入的库JAXB（JDK1.7新产品,组成部分）

    JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生Java类的技术.该过程中,JAXB也提供了将XML实例文档反向 ...

  5. 前端调试效率低？试试这10个“Chrome开发者工具”使用技巧

    摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...

  6. 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情（六）码农网

    30. 用密码保护 GRUB 用密码保护你的 boot 引导程序这样你就可以在启动时获得额外的安全保障.同时你也可以在实物层面获得保护.通过在引导时给 GRUB 加锁防止任何无授权访问来保护你的服务器 ...

  7. 【jacob word】使用jacob，合并多个word为一个word文件

    将几个word文件合并到一个word文件,使用注意点: 1.后面附项目运用的jar包jacob-1.9, 2.并且jacob运用中,需要将附件内的jacob.dll放到windows/system32 ...

  8. JVM的GC实现详解

    新生代中的98%对象都是“朝生夕死”的,所以并不需要按照1:1的比例来划分内存空间,而是将内存分为一块比较大的Eden空间和两块较小的Survivor空间,每次使用Eden和其中一块Survivor. ...

  9. javascript优化--13模式1(DOM和浏览器模式)

    注意分离: 通过将CSS关闭来测试页面是否仍然可用,内容是否依然可读: 将JavaScript关闭来测试页面仍然可以执行正常功能:所有连接是否正常工作:所有的表单是否可以正常工作: 不使用内联处理器( ...

  10. 详解Adorner Layer(zz)

    首先,千万不要觉得Adorner离你很远,因为最简单的WPF界面也会用到Adorner.在WPF中,下面的几个很常见的功能,都是用Adorner实现的.     1. 光标(caret)     2. ...