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关键字,也不再往下执行代码