初学者简单实现评论

前几天学到了用JavaScript实现无刷新评论,晒出来记录一下自己的成果

<!DOCPYPE html>
<html>
    <head>
        <title>评论</title>
        <style type="text/css">
            #dv{
                border:1px solid pink;
            }
            #txt {
                width:400px;
                height:100px;
            }
        </style>
        <script type="text/javascript" src="J.js"></script>
        <script type="text/javascript">
            onload=function(){
            var btn=J("btn");
            btn.onclick=function(){
                //获得用户输入
                var txt=J("txt").value;
                //创建P标签
                var p=document.createElement("p");
                p.innerHTML=txt;

                //追加或插入
                var ps=J("dv").getElementsByTagName("p");
                if(ps.length>0){
                    //插入
                    J("dv").insertBefore(p,ps[0])
                }else{
                    //追加
                    J("dv").appendChild(p);
                }
            };
            };
        </script>
    </head>
    <body>
        <textarea id="txt"></textarea>
        <br/>
        <input type="button" value="评论" id="btn" />
        <br/>
        <div id="dv">

        </div>
    </body>
</html>

J.js文件内容

var J = function(id) {
    return document.getElementById(id);
};

成果:
这里写图片描述
只是简单实现,并没有进行美化

猜你喜欢

转载自blog.csdn.net/g165945348/article/details/79479760