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

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

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

瀏覽:92日期: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
相關文章:
主站蜘蛛池模板: 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 电采暖锅炉_超低温空气源热泵_空气源热水器-鑫鲁禹电锅炉空气能热泵厂家 | 空气能暖气片,暖气片厂家,山东暖气片,临沂暖气片-临沂永超暖通设备有限公司 | 机床导轨_导轨板_滚轮导轨-上海旻佑精密机械有限公司 | 商标转让-商标注册-商标查询-软著专利服务平台 - 赣江万网 | 一体化污水处理设备,一体化污水设备厂家-宜兴市福源水处理设备有限公司 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 | 转向助力泵/水泵/发电机皮带轮生产厂家-锦州华一精工有限公司 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 | 小型数控车床-数控车床厂家-双头数控车床 | LED显示屏_LED屏方案设计精准报价专业安装丨四川诺显科技 | 厦门网站建设_厦门网站设计_小程序开发_网站制作公司【麦格科技】 | 庭院灯_太阳能景观灯_草坪灯厂家_仿古壁灯-重庆恒投科技 | 火锅加盟_四川成都火锅店加盟_中国火锅连锁品牌十强_朝天门火锅【官网】 | 商标转让-购买商标专业|放心的商标交易网-蜀易标商标网 | 顺景erp系统_erp软件_erp软件系统_企业erp管理系统-广东顺景软件科技有限公司 | 披萨石_披萨盘_电器家电隔热绵加工定制_佛山市南海区西樵南方综合保温材料厂 | 金属软管_不锈钢金属软管_巩义市润达管道设备制造有限公司 | 挤塑板-XPS挤塑板-挤塑板设备厂家[襄阳欧格] | 山东钢格板|栅格板生产厂家供应商-日照森亿钢格板有限公司 | ◆大型吹塑加工|吹塑加工|吹塑代加工|吹塑加工厂|吹塑设备|滚塑加工|滚塑代加工-莱力奇塑业有限公司 | 成都顶呱呱信息技术有限公司-贷款_个人贷款_银行贷款在线申请 - 成都贷款公司 | 上海物流公司,上海货运公司,上海物流专线-优骐物流公司 | 不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰]-不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰] | 气动|电动调节阀|球阀|蝶阀-自力式调节阀-上海渠工阀门管道工程有限公司 | 大连海岛旅游网>>大连旅游,大连海岛游,旅游景点攻略,海岛旅游官网 | 硅胶管挤出机厂家_硅胶挤出机生产线_硅胶条挤出机_臣泽智能装备 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 361°官方网站| 航空障碍灯_高中低光强航空障碍灯_民航许可认证航空警示灯厂家-东莞市天翔航天科技有限公司 | 美国HASKEL增压泵-伊莱科elettrotec流量开关-上海方未机械设备有限公司 | 河南生物显微镜,全自动冰冻切片机-河南荣程联合科技有限公司 | 熔体泵_熔体出料泵_高温熔体泵-郑州海科熔体泵有限公司 | 365文案网_全网创意文案句子素材站 | 磁力抛光机_磁力研磨机_磁力去毛刺机_精密五金零件抛光设备厂家-冠古科技 | 药品冷藏箱厂家_低温冰箱_洁净工作台-济南欧莱博电子商务有限公司官网 | 雷达液位计_超声波风速风向仪_雨量传感器_辐射传感器-山东风途物联网 | 隔爆型防爆端子分线箱_防爆空气开关箱|依客思 | 5L旋转蒸发器-20L-50L旋转蒸发器-上海越众仪器设备有限公司 | 杜甫仪器官网|实验室平行反应器|升降水浴锅|台式低温循环泵 | 加热制冷恒温循环器-加热制冷循环油浴-杭州庚雨仪器有限公司 | 北京开业庆典策划-年会活动策划公司-舞龙舞狮团大鼓表演-北京盛乾龙狮鼓乐礼仪庆典策划公司 |