DOM实现发表评论

墨蓝 2022-09-14 09:49 173阅读 0赞

**html:**

<input type="text"><button>发表</button>
        <ul></ul>

**javascript:**

<script>
            /* 
                点击发表将输入框的内容添加到ul的第一个子节点
            */
            // 获取元素 inp btn ul
            var inp = document.querySelector('input');
            var ul =document.querySelector('ul');
            var btn =document.querySelector('button');
            console.log(inp, ul, btn);
    
            // 点击button
            btn.onclick = function () {
                // 输入框的内容
                var txt = inp.value;
                console.log(txt);
                // 第一个子节点 创建子节点
                var li = document.createElement('li');
                li.innerHTML = txt;
                console.log(li);
                // 获取ul的所有的子节点
                console.log(ul.children);
                // 判断是否有子节点
                if(ul.children.length == 0){
                    // 追加
                    ul.appendChild(li);
                } else {
                    // 添加到第一个
                    ul.insertBefore(li, ul.children[0]);
                }
    
                // 清除输入框的内容
                inp.value = '';
            };
        </script>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_18_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_14_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_16_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c0fff25d416c4cf19718b42ef2a1e99d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/7c4ad824c40740be91a92931a38f6802.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/52969524fd7f42df8e5e7c027b78d20d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关 ruby on rails_允许在Ruby on Rails上发表评论

ruby on rails 允许评论 ( Allowing Comments ) ![Blogging outdoors on location][] lech

- 日理万妓/ 2022年12月07日 12:11/ 0 赞/ 184 阅读

相关 java怎么实现微博评论_用户操作之回复评论、查看微博评论功能实现一

2021春节即将来临，在此之际debug抽空撸了一套类似“QQ空间”、“微信朋友圈”PC版的互联网社交软件系统，并将其录制成了视频，特此分享给诸位进行学习，以掌握、巩固更多的

女爷i/ 2022年11月06日 07:55/ 0 赞/ 207 阅读

相关 java怎么实现微博评论_用户操作之回复评论、查看微博评论功能实现一

2021春节即将来临，在此之际debug抽空撸了一套类似“QQ空间”、“微信朋友圈”PC版的互联网社交软件系统，并将其录制成了视频，特此分享给诸位进行学习，以掌握、巩固更多的

你的名字/ 2022年10月23日 09:52/ 0 赞/ 205 阅读

相关 markdown 发表文章

markdown 编辑器发表博客 markdown 页面编辑器： [http://blog.csdn.net/qq\_19558705/artic

阳光穿透心脏的1/2处/ 2022年09月25日 01:23/ 0 赞/ 181 阅读

相关 DOM实现发表评论

html: <input type="text"><button>发表</button> <ul></ul> javascript: <s

墨蓝/ 2022年09月14日 09:49/ 0 赞/ 174 阅读

相关《Flutter 实战开发旅行社交手机APP》第一章广场模块 1.6 发表评论

发表评论视图层数据层 API 服务类逻辑层演示视图层封装的弹出评论输入框方法，巧用 `Get.bot

傷城~/ 2022年09月08日 14:54/ 0 赞/ 152 阅读

相关 vue实现发布评论、评论管理

功能要求 1. 实现发布评论功能 2. 实现评论列表的展示 3. 使用 tab 栏切换的方式来实现

Bertha 。/ 2022年08月28日 04:41/ 0 赞/ 258 阅读

相关基于vue练习demo：发表评论案例 (使用localStorage存储数据)

前言最近在学习 VUE的相关知识，之前学习html和css3和原生js及jq库时感觉还挺轻松，但是接触vue框架之后才发现需要了解的东西太多了(如 vue-router

￡神魔★判官ぃ/ 2022年03月27日 14:10/ 0 赞/ 222 阅读

相关基于vue练习demo：发表评论案例 (使用localStorage存储数据)

前言最近在学习 VUE的相关知识，之前学习html和css3和原生js及jq库时感觉还挺轻松，但是接触vue框架之后才发现需要了解的东西太多了(如 vue-router，

左手的ㄟ右手/ 2022年02月01日 13:25/ 0 赞/ 259 阅读

相关第六章组件 65-66 组件案例-发表评论功能的实现

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5

我不是女神ヾ/ 2021年11月04日 11:44/ 0 赞/ 249 阅读