功能：
- 点击城市列表项，如果内容列表不存在，则插入点击项；
- 如果内容列表中已存在，则不插入，然后把内容列表中的对应项放到第一位。
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>枚举算法实现list列表</title> <style> .tag-list a{ text-decoration: none; display: inline-block; margin: 0 10px; } .con-show{ padding: 20px 10px; background-color: #f0f0f0; margin-top: 20px; } .con-show p{ margin: 10px; } </style> </head> <body> <div class="tag-list"> <h3>城市列表：</h3> <a href="javascript:;">北京</a> <a href="javascript:;">上海</a> <a href="javascript:;">南京</a> <a href="javascript:;">深圳</a> <a href="javascript:;">广州</a> <a href="javascript:;">天津</a> </div> <div class="con-list"></div> </body> </html>
JS代码：
var oList = document.querySelector('.tag-list'), aItems = oList.getElementsByTagName('a'), oConList = document.querySelector('.con-list'); for(var i = 0; i < aItems.length; i++){ aItems[i].onclick = function() { var ownText = this.innerHTML; var oP = document.createElement('p'); // 如果内容列表中已经存在要插入的对象 if(checkRepeat(ownText)) { console.log('内容已经存在喽...'); // 把内容列表中已存在的内容项前置 toBefore(ownText); }else { // 如果不存在，则插入 oP.innerHTML = ownText; oConList.insertBefore(oP, oConList.querySelectorAll('p')[0]); } } } // 枚举内容类别中的内容，检测是否和要插入的相同，如果有相同项，返回true function checkRepeat(text) { oConItem = oConList.querySelectorAll('p'); for(var i = 0; i < oConItem.length; i++){ if(oConItem[i].innerHTML == text){ return true; } } } // 如果内容列表中已经存在将要插入的对象，则把内容列表中对应内容前置 function toBefore(text) { oConItem = oConList.querySelectorAll('p'); for(var i = 0; i < oConItem.length; i++){ if(oConItem[i].innerHTML == text){ oConList.insertBefore(oConItem[i], oConItem[0]); } } }