以下为通过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. python 读取sqlite3 数据库

    import sqlite3 name = "tom" age = 30 con = sqlite3.connect("d:\\test.db") cur = ...

  2. Maven打包web工程成WAR

    其实不一定要通过Goals:package来打war包,直接run as maven bulid也行:

  3. DBA_Oracle基本体系内存和进程结构（概念）

    2014-08-05 Created By BaoXinjian

  4. requesting java ast from selection

    遇到這個錯誤是因為在eclipse中選擇了maven->update project.接著就不斷的出現題目上的錯誤,然後就提示是否退出workbench. 查看了一下項目的compile jre ...

  5. 帝国CMS商城功能高级使用

    一.常见问题1.为什么自定义模型加入购物车提示“非商城表的信息”?答:模型要使用商城的功能,要先到:后台>商城>商城参数设置:“指定使用商肠能的数据表”勾选你这个自定义模型表,才可以使用. ...

  6. RightBarButon

    //rightBar button UIButton *rightButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 34, 34)]; ...

  7. 配置sql server 2000以允许远程访问 及 连接中的四个最常见错误

    地址:http://www.cnblogs.com/JoshuaDreaming/archive/2010/12/01/1893242.html 配置sql server 2000以允许远程访问适合故 ...

  8. Citrix 服务器虚拟化之八 Xenserver虚拟机模版

    Citrix 服务器虚拟化之八 Xenserver虚拟机模版 XenServer与VMware不同,Vmware只能将现有的VM转换成模版,而XenServer具有两种方法:一种是将现有 VM 转换为 ...

  9. dirname basename 截取路径中的目录以及文件名

    dirname basename    截取路径中的目录以及文件名 windows 下面: #include "shlwapi.h"#pragma comment(lib, &qu ...

  10. mybatis的增删改查

    一.配置文件方式 mapper.xml: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE ...