电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JS實現簡易留言板(節點操作)

瀏覽:90日期:2024-05-16 18:20:17

本文實例為大家分享了JS實現簡易留言板的具體代碼,供大家參考,具體內容如下

今天的案例主要是對節點進行操作

創建節點、添加節點、刪除節點以及為節點添加內容的操作

就是一個簡單的留言板功能,可以發布留言,刪除留言。

主要思路:兩個鼠標點擊事件——點擊發布按鈕事件和點擊刪除按鈕事件

發布按鈕事件:首先在文檔中創建li節點。然后第二步,先把文本域中的內容獲取出來賦給li,這里要注意,文本域是表單元素,獲取表單元素的內容是使用表單的特有屬性value,要與普通元素獲取內容的innerHTML進行區分;再把刪除鏈接添加到li中,利用字符串拼接的方式。最后把li節點添加到ul中,添加的方式有兩種,是直接添加到ul列表項的末尾,也可以添加到指定位置。這里我是選中插入到ul列表的最前面。

刪除按鈕事件:點擊刪除按鈕的事件是在把創建的li添加到ul中之后定義的。刪除的操作主要是要弄清除是父節點元素刪除子節點元素。在這里點擊刪除鏈接,刪除的是當前被點擊的按鈕所在的li。li是刪除連接的父節點元素。

分析永遠比敲代碼重要。要先分析,再去敲代碼,實現需求。

先看效果圖吧

默認是沒有任何內容的

JS實現簡易留言板(節點操作)

在文本域中輸入,點擊發布,可以發布留言,如果發完想刪除,可以點擊里面的刪除按鈕,刪除留言

JS實現簡易留言板(節點操作)

JS實現簡易留言板(節點操作)

刪除操作后:

JS實現簡易留言板(節點操作)

JS代碼:

<script> // 點擊發布,會把文本域中的內容發布到ul中 // 點擊刪除,會刪除留言 // 1.獲取事件源 文本域 按鈕 文本域 var text = document.querySelector(’textarea’); var btn = document.querySelector(’button’); var ul = document.querySelector(’ul’); // 2.注冊點擊事件 btn.onclick = function () { // 首先會創建一個li 并把文本域的內容給li 再把li添加到ul中 var li = document.createElement(’li’); if (text.value == ’’) { alert(’您沒有輸入內容’) } else { // 文本域的值 value // 增加一個刪除留言的按鈕 li.innerHTML = text.value + ’<a href='javascript:;' rel='external nofollow' rel='external nofollow' >刪除</a>’; ul.insertBefore(li, ul.children[0]); // 把最新的發布放到最前面 // ul.appendChild(li); // 3.注冊刪除點擊事件 var removeBtn = document.querySelectorAll(’a’); for (var i = 0; i < removeBtn.length; i++) { removeBtn[i].onclick = function () { ul.removeChild(this.parentNode); } } } }</script>

全部代碼:

<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>留言板</title> <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; } li a { float: right; } </style></head> <body> <textarea name='' id=''></textarea> <button>發布</button> <ul> </ul> <script> // 點擊發布,會把文本域中的內容發布到ul中 // 點擊刪除,會刪除留言 // 1.獲取事件源 文本域 按鈕 文本域 var text = document.querySelector(’textarea’); var btn = document.querySelector(’button’); var ul = document.querySelector(’ul’); // 2.注冊點擊事件 btn.onclick = function () { // 首先會創建一個li 并把文本域的內容給li 再把li添加到ul中 var li = document.createElement(’li’); if (text.value == ’’) { alert(’您沒有輸入內容’) } else { // 文本域的值 value // 增加一個刪除留言的按鈕 li.innerHTML = text.value + ’<a href='javascript:;' rel='external nofollow' rel='external nofollow' >刪除</a>’; ul.insertBefore(li, ul.children[0]); // 把最新的發布放到最前面 // ul.appendChild(li); // 3.注冊刪除點擊事件 var removeBtn = document.querySelectorAll(’a’); for (var i = 0; i < removeBtn.length; i++) { removeBtn[i].onclick = function () { ul.removeChild(this.parentNode); } } } } </script></body> </html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 齿辊分级破碎机,高低压压球机,立式双动力磨粉机-郑州长城冶金设备有限公司 | 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 电动打包机_气动打包机_钢带捆扎机_废纸打包机_手动捆扎机 | 东莞办公家具厂家直销-美鑫【免费3D效果图】全国办公桌/会议桌定制 | 深圳活动策划公司|庆典策划|专业公关活动策划|深圳艺典文化传媒 重庆中专|职高|技校招生-重庆中专招生网 | 电缆接头_防水接头_电缆防水接头_防水电缆接头_上海闵彬 | COD分析仪|氨氮分析仪|总磷分析仪|总氮分析仪-圣湖Greatlake | 广州网站建设_小程序开发_番禺网站建设_佛山网站建设_粤联网络 | 多米诺-多米诺世界纪录团队-多米诺世界-多米诺团队培训-多米诺公关活动-多米诺创意广告-多米诺大型表演-多米诺专业赛事 | 飞行者联盟-飞机模拟机_无人机_低空经济_航空技术交流平台 | 扬尘监测_扬尘监测系统_带证扬尘监测设备 - 郑州港迪科技有限公司 | 真石漆,山东真石漆,真石漆厂家,真石漆价格-山东新佳涂料有限公司 | 汽液过滤网厂家_安平县银锐丝网有限公司 | 宿松新闻网 宿松网|宿松在线|宿松门户|安徽宿松(直管县)|宿松新闻综合网站|宿松官方新闻发布 | 济南拼接屏_山东液晶拼接屏_济南LED显示屏—维康国际官网 | 无菌水质袋-NASCO食品无菌袋-Whirl-Pak无菌采样袋-深圳市慧普德贸易有限公司 | POS机办理_个人POS机免费领取 - 银联POS机申请首页 | 安全,主动,被动,柔性,山体滑坡,sns,钢丝绳,边坡,防护网,护栏网,围栏,栏杆,栅栏,厂家 - 护栏网防护网生产厂家 | 不锈钢钢格栅板_热浸锌钢格板_镀锌钢格栅板_钢格栅盖板-格美瑞 | 钢绞线万能材料试验机-全自动恒应力两用机-混凝土恒应力压力试验机-北京科达京威科技发展有限公司 | 亚洲工业智能制造领域专业门户网站 - 亚洲自动化与机器人网 | 茶叶百科网-茶叶知识与茶文化探讨分享平台 | 进口试验机价格-进口生物材料试验机-西安卡夫曼测控技术有限公司 | 车件|铜件|车削件|车床加工|五金冲压件-PIN针,精密车件定制专业厂商【东莞品晔】 | 瑞典Blueair空气净化器租赁服务中心-专注新装修办公室除醛去异味服务! | 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 杭州翻译公司_驾照翻译_专业人工翻译-杭州以琳翻译有限公司官网 组织研磨机-高通量组织研磨仪-实验室多样品组织研磨机-东方天净 | 锂电混合机-新能源混合机-正极材料混料机-高镍,三元材料混料机-负极,包覆混合机-贝尔专业混合混料搅拌机械系统设备厂家 | 线材成型机,线材折弯机,线材成型机厂家,贝朗自动化设备有限公司1 | 温泉机设备|温泉小镇规划设计|碳酸泉设备 - 大连连邦温泉科技 | 耳模扫描仪-定制耳机设计软件-DLP打印机-asiga打印机-fitshape「飞特西普」 | 散热器厂家_暖气片_米德尔顿散热器 | 欧美日韩国产一区二区三区不_久久久久国产精品无码不卡_亚洲欧洲美洲无码精品AV_精品一区美女视频_日韩黄色性爱一级视频_日本五十路人妻斩_国产99视频免费精品是看4_亚洲中文字幕无码一二三四区_国产小萍萍挤奶喷奶水_亚洲另类精品无码在线一区 | 都江堰招聘网-都江堰人才网 都江堰人事人才网 都江堰人才招聘网 邢台人才网_邢台招聘网_邢台123招聘【智达人才网】 | 金属回收_废铜废铁回收_边角料回收_废不锈钢回收_废旧电缆线回收-广东益夫金属回收公司 | 萃取箱-萃取槽-PVC萃取箱厂家-混合澄清槽- 杭州南方化工设备 | LNG鹤管_内浮盘价格,上装鹤管,装车撬厂家-连云港赛威特机械 | 耐高温风管_耐高温软管_食品级软管_吸尘管_钢丝软管_卫生级软管_塑料波纹管-东莞市鑫翔宇软管有限公司 | 温湿度记录纸_圆盘_横河记录纸|霍尼韦尔记录仪-广州汤米斯机电设备有限公司 | 广州网站建设_小程序开发_番禺网站建设_佛山网站建设_粤联网络 | 同步带轮_同步带_同步轮_iHF合发齿轮厂家-深圳市合发齿轮机械有限公司 |