DOM-comment.html

<!DOCTYPE HTML>
  <html lang="zh-CN">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>评论框</title>
<style type="text/css" media="screen">
    *{
        margin:0px;
        padding:0px;
        list-style:none;
    }
    #box{
        width:800px;
        border:1px solid #ccc;
        margin:100px auto;
        padding:20px;
    }
    #my_textarea{
        width:80%;
        height:120px;

    }
    .box-top{
        margin-bottom:20px;
    }
    #ul{
        margin:0 80px;
    }
    #ul li{
        border-bottom:1px dashed #ccc;
        color:red;

    }
    #ul li a{
        float: right;
    }
</style>
<script>
/*
*获取滚动的头部距离和左边距离
*scroll().top scroll().left
*/
    window.onload=function(){
        $('btn').onclick=function(){
            var content=$('my_textarea').value;
           // 判断内容是否为空
            if(content.length===0){
                alert("请输入评论内容");
                return;
            }
            //创建li标签放入ul
            var li = document.createElement('li');
            li.innerHTML=content+'<a href="javascript:;">删除</a>';
            //$('ul').appendChild(li);
            $('ul').insertBefore(li,$('ul').children[0]);
            $('my_textarea').value='';
            //删除评论
            var as=$('ul').getElementsByTagName('a');
            for(var i=0;i<as.length;i++){
                a=as[i];
                a.onclick=function(){
                    //获取父标签
                    this.parentNode.remove();
                }
            }
        }
    }
    function $(id){
        return typeof id==="string"?document.getElementById(id):null;

    }
</script>
</head>
<body>

<div id="box">
    <div class="box-top">
        <label>发表评论</label>
        <textarea id="my_textarea" cols="60" rows="10"></textarea>
        <button id="btn">发表</button>
    </div>
    <ul id="ul">
        <li>今天天气很好！<a href="javascript:;">删除</a></li>
    </ul>
</div>
</body>
</html>