以下为通过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. (C#) 调用执行批处理文件

    Task:  在Windows的Service里面定时的调用执行一个批处理文件. private ApplicationOutput RunCommandOnPC(string executableP ...

  2. YUV422/YUV420播放

    YUV播放器,directX,VS2008 MFC完成  CSDN下载 http://download.csdn.net/detail/xjt1988xjt/2386621#comment 默认是播放 ...

  3. 树莓派+qt+opencv

    树莓派:Qt开发套件和opencv安装sudo apt-get install qt4-dev-tools libqt4-dev 不用qt core 的话,其实只要按照 qt4-qmake就行了(只做 ...

  4. 高可用集群heartbeat全攻略

    heartbeat的概念   Linux-HA的全称是High-Availability Linux,它是一个开源项目,这个开源项目的目标是:通过社区开发者的共同努力,提供一个增强linux可靠性(r ...

  5. C++中为什么构造函数不能是虚函数，析构函数是虚函数

    一, 什么是虚函数? 简单地说,那些被virtual关键字修饰的成员函数,就是虚函数.虚函数的作用,用专业术语来解释就是实现多态性(Polymorphism),多态性是将接口与实现进行分离:用形象的语 ...

  6. CSS语法与用法小字典

    前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...

  7. ruby中将数组转换成hash

    class Arraydef to_h(default=nil)Hash[ *inject([]) { |a, value| a.push value, default || yield(value) ...

  8. Angularjs过滤器的开发.

    先上代码. <!DOCTYPE html> <html ng-app="FilterModule"> <head lang="en" ...

  9. Highcharts 对数组的要求

    function Reflush(phaid,proid) { $.post('GetProjectSummer.ashx', { proid: proid, phaid: phaid }, func ...

  10. POJ 2135 Farm Tour [最小费用最大流]

    题意: 有n个点和m条边,让你从1出发到n再从n回到1,不要求所有点都要经过,但是每条边只能走一次.边是无向边. 问最短的行走距离多少. 一开始看这题还没搞费用流,后来搞了搞再回来看,想了想建图不是很 ...