JavaScript DOM实现简单留言板

本文实例为大家分享了JavaScript DOM实现简单留言板的具体代码，供大家参考，具体内容如下

效果图：

先准备html代码：

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
 
    </ul>
</body>

css代码如下：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
</style>

接下来是最重要的部分，我们先使用document.querySelector()获取我们要操作的对象：button，textarea和ul；

再给button注册点击事件，中间加入判断是否有输入内容，如有输入内容，则继续操作，使用document.createElement(‘li’)创建li标签，再使用li.innerHTML获取textarea控件用户输入的值，最后使用ul.insertBefore（li,ul.children[0]）插入创建好的li标签。

注意：因为留言板显示最新的留言，所以插入在li的最前面。

完整代码如下：

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
 
    </ul>
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('你没输内容');
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = text.value;
                ul.insertBefore(li, ul.children[0]);
            }
            text.value = '';
        }
    </script>
 
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 本人ajax留言板的源程序 不错的应用js

    复制代码 代码如下: // JavaScript Document function $(id) {     return document.getElementById(id);     } function echo(obj,html) {     $(obj).innerHTML=html; } function fopen(obj) {     $(obj).style.display=""; } function fclose(obj) {     $(obj).style.

  • JS实现留言板功能

    JS实现留言板功能

    每天一个JS 小demo之留言板.主要知识点:DOM方法的理解和运用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap { width: 400px; margin: 30px au

  • jsp留言板源代码二: 给jsp初学者.

    作 者: precom (皮蛋) 2000.12.10 guestbook.jsp =========================== <html><head> <META content="text/html; charset=gb2312 " http-equiv=Content-Type> <title>张家界电话黄页(网上114)</title></head> <style type="

  • js 实现的可折叠留言板(附源码下载)

    javaScript 代码如下: $(document).ready(function(){ $(".message_list .message_body:gt(0)").hide(); $(".message_list li:gt(4)").hide(); $(".message_head").click(function(){ $(this).next(".message_body").slideToggle(500) r

  • js使用DOM操作实现简单留言板的方法

    js使用DOM操作实现简单留言板的方法

    本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素")  把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元

  • JS实现留言板功能[楼层效果展示]

    JS实现留言板功能[楼层效果展示]

    功能实现: 1.发布人和发布内容非空校验 2.编辑删除功能 3.楼层效果展示 4.发布时间展示 效果图 目录 tools.js 时间工具包 function getTime(){ var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var date = new Date(); var year = date

  • jsp留言板源代码三: 给jsp初学者.

    作 者: precom (皮蛋) 2000.12.10reply.jsp ==================================== <html><head> <META content="text/html; charset=gb2312 " http-equiv=Content-Type> <title>张家界电话黄页(网上114)</title></head> <style type=&q

  • 用ReactJS和Python的Flask框架编写留言板的代码示例

    近期要在生产环境上使用react,所以,自己学习了一下,写了一个简单的留言板小程序.完整的代码可以到这里下载:message-board Use 前端使用React,然后还有Bootstrap和jQuery,React负责前端展现,jQuery主要是向服务器发送ajax请求. 后端使用Flask和MongoDB,为前端提供数据.这里主要关注前端,对于后端不做过多说明. 使用webpack,对js文件进行打包. About React React是facebook开发一个用于前段交互的Javasc

  • JS实现简易留言板（节点操作）

    本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下 今天的案例主要是对节点进行操作 创建节点.添加节点.删除节点以及为节点添加内容的操作. 就是一个简单的留言板功能,可以发布留言,删除留言. 主要思路:两个鼠标点击事件--点击发布按钮事件和点击删除按钮事件 发布按钮事件:首先在文档中创建li节点.然后第二步,先把文本域中的内容获取出来赋给li,这里要注意,文本域是表单元素,获取表单元素的内容是使用表单的特有属性value,要与普通元素获取内容的innerHTML进行区分:

  • JS+CSS模拟可以无刷新显示内容的留言板实例

    JS+CSS模拟可以无刷新显示内容的留言板实例

    本文实例讲述了JS+CSS模拟可以无刷新显示内容的留言板功能.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/

随机推荐