a、微博输入删除小案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 600px; margin: 100px auto; border: 1px solid #000; padding: 20px; } textarea { width: 450px; height: 160px; outline: none; resize: none; } ul { width: 450px; padding-left: 80px; } ul li { line-height: 25px; border-bottom: 1px dashed #cccccc; } input { float: right; } </style></head><body><div class="box" id="weibo"> <span>微博发布</span> <textarea name="" id="txt" cols="30" rows="10"></textarea> <button id="btn">发布</button> <ul id="ul"> </ul></div><script src="common.js"></script><script> var ul = $$("ul"); var btn = $$("btn"); var txt = $$("txt"); btn.onclick = function () { if (txt.value.length == 0) { alert("请输入内容"); return; } var li = document.createElement("li"); li.innerHTML = txt.value; var lis = ul.children; if (lis.length == 0) { ul.appendChild(li); } else { ul.insertBefore(li, lis[0]); } var input = document.createElement("input"); input.type = "button"; input.value = "删除"; li.appendChild(input); input.onclick = function () { this.parentNode.parentNode.removeChild(this.parentNode); } }
</script>
解题思路：
1. 先获得要操作的对象，文本域，发布按钮,ul
2. 给发布按钮注册单击事件
3. 点击发布按钮的时候，判断用户输入的内容是否为空，也就是判断文本域内容是否为空，为空则return，不再往下执行。
4. 动态的创建元素li,然后追加到ul中
5. 将用户输入的内容做为li的文本
6. 动态的创建删除按钮(input)，并添加对应的属性(type=button,value='删除')并追加到li中
7. 判断ul中是否有子元素，如果有则将创建的新的li往前插入(insertBefore)，如果是第一个li则是给ul追加(appendChild)
8. 给创建的input(删除按钮)注册单击事件，当点击删除按钮的时候，从ul中删除对应的li
b、模拟百度输入框小案例：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #box { width: 400px; margin: 200px auto; /*border: 1px solid #000;*/ } #txtSearch { width: 300px; } #pop { width: 300px; border: 1px solid red; padding: 0px; } #pop ul { list-style-type: none; margin: 5px; padding: 0px; } #pop ul li { } </style></head><body><div id="box"> <input type="text" value="" id="txtSearch"/> <input type="button" value="搜索" id="btnSearch"/></div><script src="common.js"></script><script> var array = ["a", "abc", "aaa", "aabbcc", "aaaaaaa", "abedoefjldkf", "bbddcc", "aa", "aaeeccss"]; var txt = document.getElementById("txtSearch"); var btn = document.getElementById("btnSearch"); var box = document.getElementById("box");// txt.onkeyup = function () {// var v = txt.value;// var filterArr = [];// for (var i = 0; i < array.length; i++) {// if (array[i].indexOf(v) == 0) {// filterArr.push(array[i]);// }// }// var divPop = document.getElementById("pop");// if (divPop) {// box.removeChild(divPop);// }// if (filterArr.length == 0) {// return;// }// if (v.length == 0) {//用户输入数据为空的时候，不再往下执行代码。// return;// }// var divPop = document.createElement("div");// divPop.id = "pop";// box.appendChild(divPop);// var ul = document.createElement("ul");// divPop.appendChild(ul);// for (var j = 0; j < filterArr.length; j++) {// var li = document.createElement("li");// ul.appendChild(li);// li.innerHTML = filterArr[j];// }//// }txt.onkeyup= function () { var v=txt.value; var arr=[]; for(var i=0;i<array.length;i++){ if(array[i].indexOf(v)==0){ arr.push(array[i]); } } var divPop=document.getElementById("pop"); if(divPop){ box.removeChild(divPop);//删除创建div的样式 } if(arr.length==0){ return; } if(v.length==0){//如果用户不输入内容，不再执行下面代码； return; } var divPop=document.createElement("div"); divPop.id="pop"; box.appendChild(divPop); var ul=document.createElement("ul"); divPop.appendChild(ul); for(var j=0;j<arr.length;j++){ var li=document.createElement("li"); ul.appendChild(li); li.innerHTML=arr[j]; }}</script>解题思路：
1. 当键盘按下并抬起的时候触发事件
2. 根据用户输入的内容去数组当中查找以用户输入的内容开头的数据
3. 将遍历到的以用户输入的内容为开头的数据放到一个新的数组当中
4. 动态创建元素div,ul等，然后追加，并设置样式
5. 循环遍历新数组，根据新数组中的元素个数，创建li,并追加到ul中
6. 根据新输入的数据在生成Div之前，看是否能够通过ID获得div,如果有的话，则在创建新元素之前删除之前的div
7. 如果数组元素为空的话，加return关键字，不再往下执行代码
8. 如果文本框的输入为空的话，加return关键字,也不再往下执行代码
来源：https://www.cnblogs.com/Ma-lulu/p/5759157.html