以下为通过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. 【SQL Server】系统学习之二：索引优化

    页大小8192个字节,行限制为8060字节(大型对象除外). 包含varchar nvarchar varbinary sql_variant(8012,object类型) clr 的行,如果行大小超 ...

  2. CentOS of MySQL command

    1.本地连接数据库 [root@iZ253lxv4i0Z mysql]# mysql -u root -pEnter password: or: [root@iZ253lxv4i0Z mysql]# ...

  3. shell 的语法

    SHELL 的语法 n  变量:字符串,数字,环境和参数 n  条件:shell中的布尔值 n  程序控制:if, elif, for, while until, case n  命令列表 n  函数 ...

  4. Spark1.4启动spark-shell时initializing失败

    错误信息如下: 5/11/03 16:48:15 INFO spark.SparkContext: Running Spark version 1.4.1 15/11/03 16:48:15 WARN ...

  5. C开源hash项目uthash

    uthash 是C的比较优秀的开源代码,它实现了常见的hash操作函数,例如查找.插入.删除等.该套开源代码采用宏的方式实现hash函数的相关功能,支持C语言的任意数据结构最为key值,甚至可以采用多 ...

  6. C#多字符分割

    string demo = "0 1 2 3";string[] result = demo.Split(" ,,".ToCharArray());试试,中间的 ...

  7. ORA-30036

    http://blog.sina.com.cn/s/blog_676255e101018d5s.html

  8. DualPivotQuicksort 排序算法解析

    DualPivotQuicksort是JDK1.7开始的采用的快速排序算法. 一般的快速排序采用一个枢轴来把一个数组划分成两半,然后递归之. 大量经验数据表面,采用两个枢轴来划分成3份的算法更高效,这 ...

  9. [ActionScript 3.0] AS3 GUID(全局唯一标识符)

    package com.controls { import flash.display.Sprite; import flash.system.Capabilities; public class G ...

  10. 大容量导入和导出 XML 文档的示例

    示例表 若要测试示例 A,必须创建示例表 T.   USE tempdb CREATE TABLE T (IntCol int, XmlCol xml); GO 示例数据文件 在运行示例 A 之前,必 ...