JavaScript实现简易留言板

最新推荐文章于 2024-07-08 18:01:35 发布

奕八先生

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量1.2k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/dy799/article/details/114181709

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

留言板

需要实现的功能

 	Ⅰ，最新留言显示在最上边
 	Ⅱ，有删除功能
 	Ⅲ，点击留言后清空input内容

实现功能
```
 Ⅰ，HTML部分
```

<!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>
</head>
<body>
    <input type="text" id="txt"><input type="button" value="请留言" id="btn">
    <ul id="ul"></ul>
</body>
</html>

	Ⅱ，JS部分

		var o_txt = document.getElementById('txt');
        var o_btn = document.getElementById('btn');
        var o_ul = document.getElementById('ul');
        o_btn.onclick = function (){
            var txt = o_txt.value;
            //创建li
            var o_li = document.createElement('li');
            //创建删除
            var a = document.createElement('a');
            //设置啊a的href属性
            a.href = 'javascript:;'
            a.innerText = '删除';
            //把留言放到li里
            o_li.innerText = txt;
            //把a放到留言后边
            o_li.appendChild(a);
            //如果ul里面没有li则追加到ul里面有的话插入到最前面
            if(o_ul.children.length){
                o_ul.insertBefore(o_li,o_ul.firstElementChild);
            }else{
                o_ul.appendChild(o_li);
            }    
            a.onclick = function (){
                //a的父元素为li  移除li
                a.parentNode.remove();
            }
            //清空里面的value
            o_txt.value = '';
        }

奕八先生

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
JavaScript实现简易留言板

留言板需要实现的功能 Ⅰ，最新留言显示在最上边 Ⅱ，有删除功能 Ⅲ，点击留言后清空input内容实现功能 Ⅰ，HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
复制链接

扫一扫