添加标签

上先上干货,以下是源码,

刚刚学习JS。搞了半天才搞出来,不知道有什么BUG,

主要功能是:添加标签,添加个数限制,排除重复,

遇到的坑,

indexof()的不兼容IE6-IE8不兼容

JS获取文字的方法

通过保存文字到数组,来判断是否有文字重复,

通过数组长度来判断,添加的个数,做个数限制!

总的来说总算写完了。真是东拼西凑啊!!!!!!!!!!!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>创建元素</title>
    <script>
    window.onload = function() {
        var ainput = document.getElementById('Input');
        var aBtn = document.getElementById('Btn');
        var Oul = document.getElementById('Oul');
        var arrs = [];

        aBtn.onclick = function() {
            var newLi = document.createElement('li');
            var aLi = Oul.getElementsByTagName('li'); //选中所有LI
            newLi.innerHTML = '<span>' + ainput.value + '</span>' + '<a href="javascript:;" class="del">删除</a>';
            newLi.className = "classname";

            var btnA = Oul.getElementsByTagName("a");
            //删除标签方法
            function delLi(e) {
                for (var i = 0; i < btnA.length; i++) {
                    e[i].onclick = function() {

                        var x = arrs.indexOf(text(this.previousSibling)); //获取兄弟节点的值

                        Oul.removeChild(this.parentNode);

                        arrs.splice(x, 1);
                    }
                }
            };
            //indexof()兼容写法
            if (!Array.prototype.indexOf) {
                Array.prototype.indexOf = function(ele) {
                    // 获取数组长度
                    var len = this.length;
                    // 检查值为数字的第二个参数是否存在,默认值为0
                    var fromIndex = Number(arguments[1]) || 0;
                    // 当第二个参数小于0时,为倒序查找,相当于查找索引值为该索引加上数组长度后的值
                    if (fromIndex < 0) {
                        fromIndex += len;
                    }
                    // 从fromIndex起循环数组
                    while (fromIndex < len) {
                        // 检查fromIndex是否存在且对应的数组元素是否等于ele
                        if (fromIndex in this && this[fromIndex] === ele) {
                            return fromIndex;
                        }
                        fromIndex++;
                    }
                    // 当数组长度为0时返回不存在的信号:-1
                    if (len === 0) {
                        return -1;
                    }
                }
            }
            //兼容浏览器获取节点文本的方法
            function text(e) {
                var t = "";
                //如果传入的是元素,则继续遍历其子元素
                //否则假定它是一个数组
                e = e.childNodes || e;

                //遍历所有子节点
                for (var j = 0; j < e.length; j++) {
                    //如果不是元素,追加其文本值
                    //否则,递归遍历所有元素的子节点
                    t += e[j].nodeType != 1 ?
                        e[j].nodeValue : text(e[j].childNodes);
                }
                //返回区配的文本
                return t;
            }

            //判断数组中是否存在的方法
            Array.prototype.S = String.fromCharCode(2);
            Array.prototype.in_array = function(e) {
                var r = new RegExp(this.S + e + this.S);
                return (r.test(this.S + this.join(this.S) + this.S));
            };
            //先判断是否存在,再进行操作
            if (arrs.in_array(ainput.value) /*有重复返回ture*/ ) {
                alert("有重复了");
            } else if (arrs.length > 5 - 1) {
                alert("最多五个");
            } else {
                arrs.push(ainput.value); //添加到数组
                Oul.appendChild(newLi); //创建元素
            };

            delLi(btnA); //删除的方法

        }
    }
    </script>
</head>

<body>
    <input type="text" value="" id="Input">
    <input type="button" value="添加" id="Btn">
    <ul id="Oul"></ul>
</body>

</html>
    原文地址:https://www.cnblogs.com/hupan508/p/5197421.html