<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        #first{

            background: red;

        }

    </style>

</head>

<body>

    <input type="button" value="删除黑色" id="btn">

    <ul id="UL">

        <li id="first">first</li>

        <li></li>

        <li id="li3"><span>oMing</span></li>

        <li></li>

        <li>last</li>

    </ul>

    <input type="text" id="txt">

    <input type="button" value="添加" id="addBtn">

    <script>

        /* 改 && 查 */

        // 查找父元素

        var oBtn = document.getElementById("btn");

        // alert(oBtn.parentNode.parentNode.parentNode);

        // 查找子元素

        var oUl = document.getElementById("UL");

        var oLi = oUl.children;

        // alert(oLi[2].innerHTML);

        var oFirst = oUl.firstElementChild || oUl.firstChild;

        var oLast = oUl.lastElementChild || oUl.lastChild;

        oFirst.style.background = 'pink';

        // 查找兄弟元素

        var nextBro = oFirst.nextElementSibling;

        var prevBro = oLast.previousElementSibling;

        nextBro['style'].background = 'black';

        nextBro.innerHTML = "firstChild's nextBro";

        nextBro['style'].color = 'white';

        prevBro['style'].background = 'hotpink';

        /* 增 && 删 */

        // 创建元素

        var oTxt = document.getElementById("txt");

        var addBtn = document.getElementById("addBtn");

        addBtn.onclick = function(){

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

            li.innerHTML = oTxt.value;

            //oUl.appendChild(li);

            //插入到指定位置

            oUl.insertBefore(li,oUl.children[0]);

            oTxt.value = '';

        }

        // 删除节点

        oBtn.onclick = function(){

            oUl.removeChild(nextBro);

        }

    </script>

</body>

</html>

原生JavaScript对【DOM元素】的操作——增、删、改、查的更多相关文章

  1. django单表操作 增 删 改 查

    一.实现:增.删.改.查 1.获取所有数据显示在页面上 model.Classes.object.all(),拿到数据后,渲染给前端;前端通过for循环的方式,取出数据. 目的:通过classes(班 ...

  2. 好用的SQL TVP~~独家赠送[增-删-改-查]的例子

    以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化.  本系列主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础] ...

  3. iOS FMDB的使用(增,删,改,查,sqlite存取图片)

    iOS FMDB的使用(增,删,改,查,sqlite存取图片) 在上一篇博客我对sqlite的基本使用进行了详细介绍... 但是在实际开发中原生使用的频率是很少的... 这篇博客我将会较全面的介绍FM ...

  4. iOS sqlite3 的基本使用(增 删 改 查)

    iOS sqlite3 的基本使用(增 删 改 查) 这篇博客不会讲述太多sql语言,目的重在实现sqlite3的一些基本操作. 例:增 删 改 查 如果想了解更多的sql语言可以利用强大的互联网. ...

  5. django ajax增 删 改 查

    具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...

  6. ADO.NET 增 删 改 查

    ADO.NET:(数据访问技术)就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 ADO.NET所有数据访 ...

  7. MVC EF 增 删 改 查

    using System;using System.Collections.Generic;using System.Linq;using System.Web;//using System.Data ...

  8. python基础中的四大天王-增-删-改-查

    列表-list-[] 输入内存储存容器 发生改变通常直接变化,让我们看看下面列子 增---默认在最后添加 #append()--括号中可以是数字,可以是字符串,可以是元祖,可以是集合,可以是字典 #l ...

  9. MongoDB增 删 改 查

    增 增加单篇文档 > db.stu.insert({sn:'001', name:'lisi'}) WriteResult({ "nInserted" : 1 }) > ...

  10. 简单的php数据库操作类代码(增,删,改,查)

    这几天准备重新学习,梳理一下知识体系,同时按照功能模块划分做一些东西.所以.mysql的操作成为第一个要点.我写了一个简单的mysql操作类,实现数据的简单的增删改查功能. 数据库操纵基本流程为: 1 ...

随机推荐

  1. cut命令、case与select语句

    cut命令 常用参数: -c character 字符 -d delimiter 分隔符 -f field 域(列) --output-delimiter 输出分隔符 例: # echo 12345 ...

  2. windows下telnet的用法

    前言 这里利用Windows7下如何使用Telnet命令给大家总结如下: 第一步:在控制面板里,点击"程序"选项 第二步:在程序选项下,点击"打开或关闭Windows功能 ...

  3. pytest多进程/多线程执行测试用例

    前言: 实际项目中的用例数量会非常多,几百上千:如果采用单进程串行执行的话会非常耗费时间.假设每条用例耗时2s,1000条就需要2000s $\approx$ 33min:还要加上用例加载.测试前/后 ...

  4. 星际争霸的虫王IA退役2年搞AI，自叹不如了

    ------------恢复内容开始------------ 金磊 发自 凹非寺 量子位|公众号 QbitA 这年头,直播讲AI,真算不上什么新鲜事.但要是连职业电竞选手,都开播主讲呢?没开玩笑,是真 ...

  5. 关于cpu体系架构的一些有趣的故事分享

    从排查一次匪夷所思的coredump,引出各种体系架构的差异. 本文中的所有内容来自学习DCC888的学习笔记或者自己理解的整理,如需转载请注明出处.周荣华@燧原科技 1 背景 从全世界有记载的第一台 ...

  6. 本地使用 Docker Compose 与 Nestjs 快速构建基于 Dapr 的 Redis 发布/订阅分布式应用

    Dapr(分布式应用程序运行时)介绍 Dapr 是一个可移植的.事件驱动的运行时,它使任何开发人员能够轻松构建出弹性的.无状态和有状态的应用程序,并可运行在云平台或边缘计算中,它同时也支持多种编程语言 ...

  7. 2022-07-15 第六组 润土 Java03数据结构学习笔记

    数据结构: 数组:最基本的数据结构(线性表) 链表:单向链表,双向链表 树:二叉树 图:深度优先遍历.广度优先遍历 查找: 线性查找 折半查找 排序: 冒泡排序* 快速排序 插入排序* 选择排序* 希 ...

  8. Java之struts2框架学习

    Java之struts2框架学习 About Struts2 Struts也是一款MVC框架 , Struts2是Struts的下一代产品,是在Struts1和WebWork的技术基础上进行了合并的全 ...

  9. Mysql 系列 | 日志模块

    了解了 SQL 执行的流程,知道每一条语句都经过连接器.查询存储.分析器.优化器.执行器最后到存储引擎的过程.查询语句是如此,更新语句也不例外. 不同的是,更新语句会修改表数据,这里就涉及到两个重要的 ...

  10. 在.NET 6.0中配置WebHostBuilder

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 在阅读第4章"使用Kestrel配置和定制HTTPS"时,您可 ...