标签：
上先上干货，以下是源码，
刚刚学习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>
标签：
原文地址：http://www.cnblogs.com/hupan508/p/5197421.html
