怎么把元素恢复回来啊?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none;}
body{font:11px Verdana, Geneva, sans-serif; padding:10px}
.tab{width:300px;}
.tab_menu{height:20px;}
.tab_menu li{float:left;height:20px; line-height:20px;padding:0 10px;border:1px solid red;margin-right:5px;background:#ccc;}
.tab_box{height:150px; border:1px solid red;padding:5px;border-top:0;}
#con_one_2,#con_one_3,#con_one_4,#con_one_5{
display:none;
}
.selected{border-bottom:0;}
#con_one_1 li,#con_one_2 li{
background:yellow;
height:30px;
line-height:30px;
margin-top:2px;
}
#list{
width:400px;
border:1px solid orange;
margin: 50px auto;
font-size:14px;
}
#list li {
height:30px;
line-height:35px;
}
#background{
border:1px solid #ccc;
height:100px;
width:110px;
line-height:100px;
}
</style>
<script type="text/javascript">
function colors (color){
var background = document.getElementById("background");
background.style.backgroundColor = color;
}
function link(){
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
links[0].onclick = function(){
colors('red');
}
links[1].onclick = function(){
colors('blue');
}
links[2].onclick = function(){
colors('orange');
}
links[3].onclick = function(){
colors('pink');
}
links[4].onclick = function(){
colors('green');
}
links[5].onclick = function(){
colors('black');
}
if(links[i].style.backgroundColor == ""){
colors('#ccc');
}
}
}
window.onload = link;
function remove(){
var list = document.getElementById("list").getElementsByTagName("li");
var i = list[list.length -1];
i.parentNode.removeChild(i);
}
</script>
</head>
<body>
<input type="button" value="恢复" />
<ul id="list">
<li><a href="#">我要红色的</a></li>
<li><a href="#">哦要蓝色的</a></li>
<li><a href="#">我要橘色的</a></li>
<li><a href="#">我要粉色的</a></li>
<li><a href="#">我要绿色的</a></li>
<li><a href="#">我要黑色的</a></li>

</ul>
<div id="background">
我最喜欢的几种颜色!
</div>
<input type="button" value="删除按钮" onclick="remove()" />
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<input type="button" value="恢复" onclick=recover(); />
function recover(){
            document.getElementById("list").innerHTML=' <li><a href="#">我要红色的</a></li>\
            <li><a href="#">哦要蓝色的</a></li>\
            <li><a href="#">我要橘色的</a></li>\
            <li><a href="#">我要粉色的</a></li>\
            <li><a href="#">我要绿色的</a></li>\
            <li><a href="#">我要黑色的</a></li>';
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            *{margin:0;padding:0;}
            ul{list-style:none;}
            body{font:11px Verdana, Geneva, sans-serif; padding:10px}
            .tab{width:300px;}
            .tab_menu{height:20px;}
            .tab_menu li{float:left;height:20px; line-height:20px;padding:0 10px;border:1px solid red;margin-right:5px;background:#ccc;}
            .tab_box{height:150px; border:1px solid red;padding:5px;border-top:0;}
            #con_one_2,#con_one_3,#con_one_4,#con_one_5{
                display:none;
            }
            .selected{border-bottom:0;}
            #con_one_1 li,#con_one_2 li{
                background:yellow;
                height:30px;
                line-height:30px;
                margin-top:2px;
            }
            #list{
                width:400px;
                border:1px solid orange;
                margin: 50px auto;
                font-size:14px;
            }
            #list li {
                height:30px;
                line-height:35px;
            }
            #background{
                border:1px solid #ccc;
                height:100px;
                width:110px;
                line-height:100px;
            }
        </style>
        <script type="text/javascript">
            function colors (color){
                var background = document.getElementById("background");
                background.style.backgroundColor = color;
            }
            function link(){
                var links = document.getElementsByTagName("a");
                for(var i=0; i<links.length; i++){
                    links[0].onclick = function(){
                        colors('red');
                    }
                    links[1].onclick = function(){
                        colors('blue');
                    }
                    links[2].onclick = function(){
                        colors('orange');
                    }
                    links[3].onclick = function(){
                        colors('pink');
                    }
                    links[4].onclick = function(){
                        colors('green');
                    }
                    links[5].onclick = function(){
                        colors('black');
                    }
                    if(links[i].style.backgroundColor == ""){
                        colors('#ccc');
                    }
                }
            }
window.onload = link;
var deleteEles = [];
            function remove(){
                var list = document.getElementById("list").getElementsByTagName("li");
                var i = list[list.length -1];
                deleteEles.push(i.parentNode.removeChild(i));
            }
function recover(){
if(deleteEles.length){
document.getElementById("list").appendChild(deleteEles.pop());
}}
    </script>
    </head>
    <body>
        <input type="button" value="恢复"  onclick="recover();"/>
        <ul id="list">
            <li><a href="#">我要红色的</a></li>
            <li><a href="#">哦要蓝色的</a></li>
            <li><a href="#">我要橘色的</a></li>
            <li><a href="#">我要粉色的</a></li>
            <li><a href="#">我要绿色的</a></li>
            <li><a href="#">我要黑色的</a></li>

        </ul>
        <div id="background">
            我最喜欢的几种颜色!
        </div>
        <input type="button" value="删除按钮" onclick="remove()" />
    </body>
</html>