怎么修改这段代码?让它在原位不动?

我点击button的时候让p元素在原来的位置不动.但是颜色还是要发生变化,就是说不想让它增加p
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
    *{margin:0;padding:0;}
    #one{
        width:960px;
        height:100px;
        background:yellow;
        line-height:100px;
        text-align:center;
    }
    #two{
        width:100px;
        height:100px;
        background:blue;
        line-height:100px;
        text-align:center;
    }
    #three{
        width:100px;
        height:100px;
        background:red;
        line-height:100px;
        text-align:center;
    }
    #four{
        width:100px;
        height:100px;
        background:#ccc;
        line-height:100px;
        text-align:center;
    }
    #five{
        width:100px;
        height:100px;
        background:pink;
        line-height:100px;
        text-align:center;
    }
    #six{
        width:100px;
        height:100px;
        background:orange;
        line-height:100px;
        text-align:center;
    }
    #seven{
        width:100px;
        height:100px;
        background:green;
        line-height:100px;
        text-align:center;
    }
</style>
</head>
<body>
<script type="text/javascript">
    function change(){
        var blue = new Array();
        blue[0] = "one";
        blue[1] = "two";
        blue[2] = "three";
        blue[3] = "four";
        blue[4] = "five";
        blue[5] = "six";
        blue[6] = "seven";
        var Index = Math.round(Math.random()*6);
        var elem = document.createElement("p");
        elem.setAttribute("id",blue[Index]);
        var text = document.createTextNode("测试!");
        elem.appendChild(text);
        document.body.appendChild(elem);
    }
</script>
<input type="button" onclick="change()" value="切换" />

</body>
</html>

解决方案 »

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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
    *{margin:0;padding:0;}
    #one{
        width:960px;
        height:100px;
        background:yellow;
        line-height:100px;
        text-align:center;
    }
    #two{
        width:100px;
        height:100px;
        background:blue;
        line-height:100px;
        text-align:center;
    }
    #three{
        width:100px;
        height:100px;
        background:red;
        line-height:100px;
        text-align:center;
    }
    #four{
        width:100px;
        height:100px;
        background:#ccc;
        line-height:100px;
        text-align:center;
    }
    #five{
        width:100px;
        height:100px;
        background:pink;
        line-height:100px;
        text-align:center;
    }
    #six{
        width:100px;
        height:100px;
        background:orange;
        line-height:100px;
        text-align:center;
    }
    #seven{
        width:100px;
        height:100px;
        background:green;
        line-height:100px;
        text-align:center;
    }
</style>
</head>
<body>
<script type="text/javascript">
    var elem;
    function change(){
        var blue = new Array();
        blue[0] = "one";
        blue[1] = "two";
        blue[2] = "three";
        blue[3] = "four";
        blue[4] = "five";
        blue[5] = "six";
        blue[6] = "seven";
        var Index = Math.round(Math.random()*6);
if(elem){
    elem.setAttribute("id",blue[Index]);
}else{
elem = document.createElement("p");
         elem.setAttribute("id",blue[Index]);
         var text = document.createTextNode("测试!");
         elem.appendChild(text);
         document.body.appendChild(elem);
}
    }
</script>
<input type="button" onclick="change()" value="切换" />

</body>
</html>
第一次点击的时候，要创建一个p，以后就直接改这个p的id就可以了