初学者简单实现评论

最新推荐文章于 2019-07-13 10:38:36 发布

码农老郭

最新推荐文章于 2019-07-13 10:38:36 发布

阅读量253

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/G165945348/article/details/79479760

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前几天学到了用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);
};

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

码农老郭

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
14
评论
初学者简单实现评论

前几天学到了用JavaScript实现无刷新评论，晒出来记录一下自己的成果&lt;!DOCPYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;评论&lt;/title&gt; &lt;style type="text/css"&gt; #dv{
复制链接

扫一扫

专栏目录