以下为通过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. activiti自定义流程之Spring整合activiti-modeler5.16实例（四）：部署流程定义

    注:(1)环境搭建:activiti自定义流程之Spring整合activiti-modeler5.16实例(一):环境搭建        (2)创建流程模型:activiti自定义流程之Spring ...

  2. 【WP之一】]独立存储

    介绍: 提供一个磁盘存储空间,他是一种虚拟的文件系统,能存储小量的数据:在默认的情况下,它只能存储1MB的文件.根据使用方式及功能的不同,独立存储空间又包含两部分:独立设置存储和独立文件存储.除非卸载 ...

  3. 黄聪：手机移动站Web响应式开发工具Viewport Resizer插件（360浏览器、谷歌Chrome浏览器兼容）

    插件作用: 移植自@MalteWassermann的脚本,一个可以测试响应式布局的chrome扩展. 插件截图: 插件下载地址(需FQ): https://chrome.google.com/webs ...

  4. 黄聪：wordpress如何使用get_avatar禁止调用gravatar头像，替换为自定义头像

    add_filter( 'get_avatar' , 'my_custom_avatar' , 1 , 5 ); function my_custom_avatar( $avatar, $id_or_ ...

  5. Redis几个认识误区(转)

    此文的作者是新浪微博平台架构师杨卫华(timyang)大师,如果关注了新浪一些牛人微博的同学应该知道,timyang前段时间正在对Redis进行一些研究和测试,也分享出了不少成果.下面一篇文章相信是t ...

  6. Maven工程JAR包关联源码

    注意看上面的图,勾选了"Download Artifact Sources"和“Download Artifact JavaDoc”以后,Maven便会自动将Manven工程中的所 ...

  7. mysql事件

    文章参考自http://blog.163.com/duanpeng3@126/blog/static/8854373520105182123112/在使用这个功能之前必须确保event_schedul ...

  8. [实变函数]5.4 一般可测函数的 Lebesgue 积分

    1定义 (1)$f$ 在 $E$ 上积分确定 $\lra$ $\dps{\int_Ef^+(x)\rd x<+\infty}$ 或 $\dps{\int_Ef^-(x)\rd x<+\in ...

  9. JDK环境变量中dt.jar、tools.jar等变量值的作用

    变量名:CLASSPATH 变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; tools.jar: 工具类 库,它跟我们程序中用到的 基础 ...

  10. eclipse中代码注释

    1.类注释 Window->Preference->Java->Code Style->Code Template alt+shift+J 默认的快捷键 或者 先敲“/”在敲两 ...