简单版发布留言案例

最新推荐文章于 2024-03-21 14:25:14 发布
最新推荐文章于 2024-03-21 14:25:14 发布
阅读量255 收藏 1
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_58060965/article/details/124086300
版权
本文介绍了如何利用JavaScript实现简单的发布留言案例。点击按钮后，动态生成li元素，并将其插入到ul列表中，将文本框内容通过innerHTML赋值给li。通过appendChild和insertBefore方法，可以选择新留言显示在列表之前或之后。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

核心思路：点击按钮之后，就动态创建一个li，添加到ul里面

            创建li的同时，把文本框里面的值通过innerHTML赋值给li

            如果想要新的留言后面显示就用appendChild,前面显示就用insertBefore

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin-top: 0;
            margin-left: 0;
        }
 
        body {
            padding: 100px;
        }
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            /* resize禁止放大缩小文本域 */
            resize: none;
        }
        ul {
            margin-top: 50px;
        }
        li {
最低0.47元/天 解锁文章
简易留言板
qq_40687516的博客
12-21 607
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js留言板
weixin_54420874的博客
03-17 1857
1、我写的是一个留言板的小案例，我在老师的基础上做出自己想要的效果。 2、先把大致的轮廓给敲出来。需要的是一个文本域和一个按钮、还有无序列表。 3、基本轮廓有了，现在来设置它的样式。内外边距都为零、使用类选择器选择到‘div’，使用到ID选择器选择到文本域‘textarea’。 4、这里说一下，“div”是html超文本标签里面标签-大部分用于包裹里面的内容。相当于是一个箱子里面可以装任何内容，装它本身都可以。 5、‘#list’这里选择到的是无序标签，无序标签里面放置的是留言语，‘
JS实现简易留言板（节点操作）
11-21
本文实例为大家分享了JS实现简易留言板的具体代码，供大家参考，具体内容如下 今天的案例主要是对节点进行操作 创建节点、添加节点、删除节点以及为节点添加内容的操作。  就是一个简单的留言板功能，可以发布留言，删除留言。 主要思路：两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件 发布按钮事件：首先在文档中创建li节点。然后第二步，先把文本域中的内容获取出来赋给li，这里要注意，文本域是表单元素，获取表单元素的内容是使用表单的特有属性value，要与普通元素获取内容的innerHTML进行区分；再把删除链接添加到li中，利用字符串拼接的方式。最后把li节点添加到ul中，添加的方式有两种，是直
利用js做简易留言板
yuyangll的博客
05-19 1246
前段时间学习了JavaScript，学的网课视频老师利用js做了简易的留言板 最近趁空闲时间自己也敲了一边 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
js做简易留言板
datuzidppd5556的博客
08-06 471
有一点编程基础的同学都能看懂 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
JavaScript-简单版发布留言案例
weixin_43569948的博客
01-14 2124
Javascript WebAPI DOM 节点操作之简单版发布留言案例 主要复习了节点操作的创建和添加以及删除节点的知识 实现功能：1.留言板由下至上发布留言 2.删除留言 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
案例：简单版发布留言.html
06-09
主要涉及元素节点的操作，创建节点，添加节点，获取节点的内容等等，主要的知识点在文章中已经都有罗列，是十分有必要牢记的
前端学习（856）：简单版发布留言案例
歌谣的博客
04-15 479
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
JavaScript小案例-留言板案例
抗争小青年的博客
06-17 1678
留言后有时间显示，且有按键监听，按下光标定到输入框，按下留言发布。 html js css 效果
简单的Js留言板
wzj_119的专栏
05-24 8318
 简单的Js留言板 function Ok_OnClick(event) {  if(document.getElementsByName("textName")[0].value == ""){   alert("请输入内容");   return;   }  var table;  var tableList = document.getElementsByTagName("TABLE"); 
利用js写一个简单的留言板
个人笔记
03-25 3355
css样式: *{ margin: 0; padding: 0; } ul{ list-style: none; } .root{ width: 500px; /*增加新的留言 父级高度也会变大! 高度不要设置*/ padding: 20px; border: 3px solid red; margin: 30px auto; } #title, #content{ width: 480px; outline: none; border-radius: 5px; bor
JS实现简易留言板
Hedia Pan的博客
08-25 494
<html> <head> <style> span{ cursor:pointer; } </style> </head> <body> <div id="content"> 聊天记录<ul id="words"></ul> </div> <textarea id="msg"></textarea> <button i.
JS——利用JS实现简易留言板
热门推荐
Bonsoir777的博客
08-26 1万+
本文主要阐述如何利用js实现简易留言板的实现过程
JavaScript实现简易留言板
dy799的博客
02-27 1321
留言板 需要实现的功能 Ⅰ，最新留言显示在最上边 Ⅱ，有删除功能 Ⅲ，点击留言后清空input内容 实现功能 Ⅰ，HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
JavaScript 案例 留言板
weixin_65257540的博客
03-18 1244
思路 1、设置点击事件。点击留言按钮获取本地储存并转为数组。 2、判断本地储存是否有值，如果有获取最后一个元素的id，如没有就把他赋值为一个新数组，把id值赋为1. 3、在判断文本框是否有值，有值才能操作。 4、调用时间函数，得到当前时间，当前用户名，以及当前内容以对象的方式存入数组。 5、调用渲染函数，每次调用都把留言框的值为空，让他重新获取重新渲染。 6、获取本地储存的数据数组，遍历每一个元素，就创建一个节点，赋值并添加进如节点。 7、为了删除操作，需要给每个删除按钮一个自定义属性。 8
js 实现简易留言板功能
weixin_30618985的博客
04-26 501
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
JavaScript+JS简易留言板
最新发布
peipei11202的博客
03-21 430
JavaScript+JS简易留言板
留言板小案例
weixin_57762552的博客
03-08 1090
留言板案例，如图： 首先新建一个html文件，写好我们需要的内容。 一个文本域，但是这个文本域里面没有内容，然后需要提前给它设置好id以方便后面获取。 一个按钮，这个按钮是很重要的，因为JS部分的内容大部分是写在它的点击事件里的，所有需要提前给它设置好id以方便后面获取。 一个无序列表，这个无序列表里面是没有内容的，但它会在后面起到至关重要的作用，所有需要提前给它设置好id以方便后面获取。 为了美观和效果需要给留...
简易留言本MVC架构实现源码发布
资源摘要信息:"PT简易留言本MVC架构v1.0.zip是一个软件工具包，包含了用于创建基于模型-视图-控制器（MVC）架构的简易留言本的所有源代码。该留言本适用于计算机课程设计、案例研究或个人项目开发。该资源的主要目的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值