用js的DOM操作写简单的留言板

最新推荐文章于 2022-05-29 21:51:44 发布
最新推荐文章于 2022-05-29 21:51:44 发布
阅读量296 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/jingangel/archive/2012/03/06/2381212.html
版权

如图，简易留言板，也就是自娱自乐版，说白了就是练习DOM操作。

要点一：document.createElement("标签名") 新建元素

要点二：父元素.appendChild("元素")  把新建的元素插入到页面的标签中（在标签的最后一个显示），这样才会在浏览器中显示出来

要点三：父元素.insertBefore("元素","要插入哪个元素的前面")  把新建的元素插入到页面中指定的标签前面，这样后面输入的内容才会显示到前面

要点四：父元素.removeChild(“元素”)  删除指定元素

下面，上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
var oMsg = document.getElementById("msg");
var oBtn = document.getElementById("btn");
var oMsg_c = document.getElementById("msg_c");
var oUl = document.createElement("ul");
  oMsg_c.appendChild(oUl);
  oBtn.onclick = function(){
var sVal = oMsg.value;
var oli = document.createElement("li");
    oli.innerHTML = sVal + " <span>删除</span>";
var oli1 = oUl.getElementsByTagName("li")
if(oli1.length>0){
      oUl.insertBefore(oli,oli1[0])
    }else{
      oUl.appendChild(oli);
    }
    oMsg.value='';

var oSpan = document.getElementsByTagName("span");
for(var i=0; i<oSpan.length; i++){
        oSpan[i].onclick = function(){
          oUl.removeChild(this.parentNode);
        }
      }

  }
}  
</script>
</head>

<body>

<h1>简易留言板</h1>

<input id="msg" type="text" size="40" value=""> <input id="btn" type="button" value="留言">

<div id="msg_c"></div>
</body>
</html>



转载于:https://www.cnblogs.com/jingangel/archive/2012/03/06/2381212.html

weixin_30502157
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript DOM——【小案例】简易留言板
DebbyOctober的博客
08-26 570
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> ul{list-style: none;} #box{ margin-top:30px; margin-left: 360px; width:800px; height:500px; border:2px solid
javascript-DOM操作-留言板制作
weixin_30852419的博客
09-06 533
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js练习</title> <style type="text/css"> #ull{ padding:0px; ...
js使用DOM操作实现简单留言板的方法
10-24
主要介绍了js使用DOM操作实现简单留言板的方法,涉及javascript中DOM操作的技巧,非常具有实用价值,需要的朋友可以参考下
一个简单的dom案例----留言板
HXR1984的博客
05-29 926
用HTML5+css+js完成一个简单的dom案例。 前言 制作一个简单的留言板，实现留言的添加、记录和删除功能 一、完成页面的基本内容 代码如下（示例）： <body> <div class="container"> <header> <div> <input id="nick" type="text" placeholder="请输入昵称"> .
简单的留言板（dom+正则练习）
xiaozhen0610的博客
08-26 112
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <textarea id="txt" cols="30" rows="10"></textarea><br> <button id="btn" style="marg
JS实现简易留言板（节点操作）
10-15
这个简单的留言板功能通过JavaScript的DOM操作实现了动态添加和删除留言，为用户提供了一个交互式的界面。值得注意的是，这里的删除操作是基于事件委托的原理，只在发布新留言时为所有的删除链接添加点击事件监听器...
基于JavaScript实现留言板功能
10-15
基于JavaScript实现留言板功能涉及到前端开发中的几个关键知识点：HTML结构布局、CSS样式设计以及JavaScript事件处理和DOM操作。以下是对这些知识点的详细介绍。 1. HTML结构布局：文档中展示的HTML代码是一个留言...
用js编写留言板
10-15
通过上述知识点的介绍，我们可以了解到，使用JavaScript编写一个基本的留言板，需要涉及到HTML页面布局、CSS样式设计、JavaScript的事件处理和DOM操作等多个方面。实际开发中，需要不断完善和优化细节，才能打造一个...
原生JS实现留言板
10-15
综上所述，通过原生JS实现留言板涉及到前端开发的核心技术，包括HTML布局、CSS样式设计、JavaScript的DOM操作和事件处理等。这样的留言板虽然功能简单，但它为我们提供了一个学习和理解前端技术的良好基础。随着技术...
DOM ------ 简易留言功能
HuoZhiyan 的博客
02-09 408
功能分析: 1.当没有内容输入时, 弹窗提示 2.可在文本框输入内容, 发布显示到网页上 3.新发布的内容在最上面 4.可以对发布的内容进行删除操作 输入为空时: 输入内容并发布 //html代码 <textarea placeholder="留言内容..."></textarea> <button>发布</button> <ul> <li>留言板</li> &lt
javascript:dom案例实现简易的留言板功能
果冻
05-11 955
核心思路： 点击按钮之后，就动态创建一个li，添加到ul 里面。 创建li 的同时，把文本域里面的值通过li.innerHTML 赋值给 li 如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore 当我们把文本域里面的值赋值给li 的时候，多添加一个删除的链接 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li 阻止链接跳转需要添加 javascript:void(0); 或者 javascript:; 点
JavaScript# DOM实现留言板
cathei的博客
07-18 1762
        &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;style&gt;         .wrap{   
Jscript Sy04 Dom实现 留言板或评论区功能
Beyond_Nothing
05-10 621
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>评论区</title> <script type="text/javascript"> onload = function () { function getMsgDate()//得到当前日期 {
DOM案例（轮播图、手风琴、留言板）
LYM0411的博客
05-18 173
DOM案例分享
v-model --双向数据绑定
qq_45802159的博客
01-03 3205
<!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实现简易留言板——节点操作
爱前端的程序媛的博客
03-10 5937
今天的案例主要是对节点进行操作 创建节点、添加节点、删除节点以及为节点添加内容的操作。 就是一个简单的留言板功能，可以发布留言，删除留言。 主要思路：两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件 发布按钮事件：首先在文档中创建li节点。然后第二步，先把文本域中的内容获取出来赋给li，这里要注意，文本域是表单元素，获取表单元素的内容是使用表单的特有属性value，要与普通元素获取...
使用JavaScript DOM制作简单留言板
weixin_42442856的博客
12-14 1168
效果图： 先准备html代码： <body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> </body> css代码如下： <style> * { margin: 0; padding: 0; .
js实现留言板
sweetllh的博客
05-07 6444
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>留言版1</title> <style> *{margin:0;padding:0;} ul, li{list-style:none;} </style>
JQuery 常见DOM操作练习1
汉南最後の読書人
11-06 1896
1.管理选择器(size()方法)所得的结果 size()方法 <!-- html{ cursor:help; font-size:12px; font-family:Arial, Helvetica, sans-serif; } div{ border:1px solid #003a75; background-color:#FFFF0
用DOM制作一个简易留言板
最新发布
05-30
好的，下面是一个简易的留言板的HTML和JavaScript代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>留言板</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>留言板</h1> <div> <label for="name">姓名：</label> <input type="text" id="name"> </div> <div> <label for="message">留言：</label> <textarea id="message"></textarea> </div> <button onclick="addMessage()">添加留言</button> <div id="messageList"></div> <script src="留言板.js"></script> </body> </html> ``` JavaScript代码： ```javascript // 留言列表 var messages = []; // 添加留言 function addMessage() { var name = document.getElementById("name").value; var message = document.getElementById("message").value; if (name && message) { var newMessage = { name: name, message: message, timestamp: new Date() }; messages.push(newMessage); showMessages(); clearForm(); } else { alert("请填写姓名和留言内容！"); } } // 显示留言列表 function showMessages() { var messageList = document.getElementById("messageList"); messageList.innerHTML = ""; messages.forEach(function(message) { var messageItem = document.createElement("div"); messageItem.innerHTML = "<strong>" + message.name + "：</strong>" + message.message + " " + message.timestamp.toLocaleString() + ""; messageList.appendChild(messageItem); }); } // 清空表单 function clearForm() { document.getElementById("name").value = ""; document.getElementById("message").value = ""; } // 初始化 showMessages(); ``` 上面的代码利用DOM操作实现了一个简易的留言板，包含姓名和留言内容两个输入框和一个添加留言按钮，点击按钮可以将输入的姓名和留言内容添加到留言列表中，同时清空输入框。留言列表按时间倒序排列，最新的留言显示在最上面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值