使用JS对HTML标签进行增删改查

最新推荐文章于 2022-01-18 16:03:23 发布

爱不到要偷

最新推荐文章于 2022-01-18 16:03:23 发布

阅读量156

点赞数

原文链接：http://www.cnblogs.com/miaoying/p/5266993.html

版权

以下为通过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>

转载于:https://www.cnblogs.com/miaoying/p/5266993.html

爱不到要偷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JS对HTML标签进行增删改查

以下为通过JS对li标签进行简单的增删改查：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ...
复制链接

扫一扫