以下为通过JS对li标签进行简单的增删改查：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        //定义变量，保存选中的标签

        var selectLi;

        //定义变量，保存修改了的标签

        var editedLi=false;

        window.onload=function()

        {

            //新增li标签到末尾

            document.getElementById("insertEnd").onclick = insertEndclick;

            //新增li标签到指定位置

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

            for(var i=0;i<liObj.length;i++)

            {

                liObj[i].onclick = liChoose;

            }

            document.getElementById("insert").onclick = insertThere;

            //删除指定标签

            document.getElementById("delete").onclick = deleteli;

            //修改指定标签内容

            document.getElementById("edit").onclick = editLi;

            //将选中的该标签变为文本框进行内容修改

            document.getElementById("edit2").onclick = editLi2;

            //将文本框中的内容保存

            document.getElementById("save").onclick = saveLi;

        }

        //新增li标签到末尾

        function insertEndclick()

        {

            var result = prompt("需要插入的li标签文本：", "小黑");

            if (result)

            {

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

                newli.innerHTML = result;

                newli.onclick = liChoose;

                document.getElementById("ulList").appendChild(newli);

            }

        }

        //新增li标签到指定位置

        function insertThere()

        {

            if (selectLi)

            {

                var result = prompt("需要插入的li标签文本：", "小黑");

                if (result) {

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

                    newli.innerHTML = result;

                    //需要给新增的li标签设置点击事件

                    newli.onclick = liChoose;

                    document.getElementById("ulList").insertBefore(newli, selectLi);

                }

            }

            else

            {

                alert("请先选择要插入的位置");

            }

        }

        //高亮选中的标签

        function liChoose()

        {

            var ul = document.getElementsByTagName("li")

            for (var i = 0; i < ul.length; i++)

            {

                ul[i].style.backgroundColor = "white";

            }

            this.style.backgroundColor = "yellow";

            selectLi = this;

        }

        //删除指定标签

        function deleteli()

        {

            if (selectLi)

            {

                selectLi.parentElement.removeChild(selectLi);

            }

            else

            {

                alert("请先选中要删除的标签");

            }

        }

        //修改指定标签

        function editLi()

        {

            if(selectLi)

            {

                var result = prompt("输入修改内容", "大白");

                if(result)

                {

                    selectLi.innerHTML = result;

                }

            }

            else

            {

                alert("请选择要修改的标签");

            }

        }

        //将选中的该标签变为文本框进行内容修改

        function editLi2()

        {

            if(selectLi)

            {

                //创建一个文本框

                var newli = document.createElement("input");

                newli.type = "text";

                //将文本框内容设置为li标签的文本值

                newli.value = selectLi.innerHTML;

                //将文本框添加到li标签内部

                selectLi.removeChild(selectLi.childNodes[0]);

                selectLi.appendChild(newli);

                editedLi = true;

            }

        }

        //将文本框中的内容保存

        function saveLi()

        {

            if (editedLi)

            {

                var editValue = selectLi.childNodes[0].value;

                selectLi.innerHTML = editValue;

            }

            else

            {

                alert("没有标签在编辑状态");

            }

        }

    </script>

</head>

<body>

    <div>

        <input type="button" id="insertEnd" value="新增到末尾" />

        <input type="button" id="insert" value="新增到指定位置" />

        <input type="button" id="delete" value="删除" />

        <input type="button" id="edit" value="修改" />

        <input type="button" id="edit2" value="将选中标签变为文本标签进行修改" />

        <input type="button" id="save" value="保存" />

    </div>

    <ul id="ulList">

        <li>小猫</li>

        <li>小鱼</li>

        <li>小狗</li>

        <li>大象</li>

        <li>树懒</li>

    </ul>

</body>

</html>

使用JS对HTML标签进行增删改查的更多相关文章

  1. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  2. 用 JS（JavaScript ）实现增删改查

    JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现简单增删改查 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HT ...

  3. Node.js + MySQL 实现数据的增删改查

    通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-cru ...

  4. node.js中对 mysql 进行增删改查等操作和async，await处理

    要对mysql进行操作,我们需要安装一个mysql的库. 一.安装mysql库 npm install mysql --save 二.对mysql进行简单查询操作 const mysql = requ ...

  5. js的动态表格的增删改查思路

    1. 首先我们要知道,动态添加,肯定不是 在页面上写死得,而是通过js调用循环放入到页面上的,我们在写动态表格的时候不要先着急写,我们第一步要做的就是构思,要把自己的逻辑先弄清楚,不然的话,前面是好写 ...

  6. 通过js代码来制作数据库增删改查插件

    代码流程 1.订制表头:table_config 2.订制显示内容: table_config,data_list 3.加载框: 图片,position:fixed       4.-字符串格式化   ...

  7. js的动态表格的增删改查完整代码

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. JS对象中属性的增删改查

    对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性 对象的分类:           1.内建对象                 -在ES标准中定义的对象,在任何的ES的实现中都可以 ...

  9. node.js操作mysql数据库之增删改查

    安装mysql模块 npm install mysql 数据库准备 mysql server所在的机器IP地址是192.168.0.108,登录账户就用root@123456 在mysql中创建tes ...

随机推荐

  1. mongodb的读写分离

    转自:http://blog.csdn.net/sd0902/article/details/21538621 mongodb的读写分离使用Replica Sets来实现 对于replica set ...

  2. 如何实现一个malloc

    任何一个用过或学过C的人对malloc都不会陌生.大家都知道malloc可以分配一段连续的内存空间,并且在不再使用时可以通过free释放掉.但是,许多程序员对malloc背后的事情并不熟悉,许多人甚至 ...

  3. 手把手教你玩转Git分布式版本控制系统！ (转载）

    目录 Git诞生历史 Git环境准备 Git安装部署 Git常用命令 Git基本操作 Git管理分支结构 Git管理标签 GitLab安装部署 GitHub托管服务 Git客户端工具 Git诞生历史 ...

  4. [Offer收割]编程练习赛4 A 满减优惠

    满减优惠 描述 最近天气炎热,小Ho天天宅在家里叫外卖.他常吃的一家餐馆一共有N道菜品,价格分别是A1, A2, ... AN元.并且如果消费总计满X元,还能享受优惠.小Ho是一个不薅羊毛不舒服斯基的 ...

  5. python 读取文本

    将文本转换到NumPy 数组中,做机器学习或其他任何任务,文本处理的技能必不可少.python 实现实现了很精简强大的文本处理功能: 假设 文件 traindata.csv 中有数据 1000行,3列 ...

  6. git分支管理和stash

    1 创建分支$ git branch 分支名 2切换到分支$ git checkout 分支名 3查看提交git log --oneline --decorate --graph --all 4 轻量 ...

  7. vb中&和+的区别

    在字符串连接时+号只能是两个字符串线连接&号可以是字符串与另一种类型的数据相连接.例如"a"+"b"是合法的,而 "a"+2是错误的 ...

  8. struts(五) 使用通配符 接收参数

    1.使用通配符简化配置 约定优于配置 <action name="student*" class="com.gc.StudentAction" metho ...

  9. [ActionScript 3.0] AS3.0 本机鼠标指针

    Flash Player 10.2添加了内置的本机鼠标指针(native mouse cursor)支持,虽然在之前的版本里我们可以侦听MouseEvent事件来模拟鼠标指针,但是在有了原生的本机鼠标 ...

  10. relative和absolute的效果

    我对这样几个效果不是特别理解: 1.float的效果: 就是搞不清楚我想要什么效果的时候可以将某个标签设置为float,一直没总结出什么规律. 2.relative和absolute的效果: 也是不清 ...