JavaScript DOM实现简单留言板
本文实例为大家分享了JavaScript DOM实现简单留言板的具体代码,供大家参考,具体内容如下
效果图:
先准备html代码:
<body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> </body>
css代码如下:
<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; } </style>
接下来是最重要的部分,我们先使用document.querySelector()获取我们要操作的对象:button,textarea和ul;
再给button注册点击事件,中间加入判断是否有输入内容,如有输入内容,则继续操作,使用document.createElement(‘li’)创建li标签,再使用li.innerHTML获取textarea控件用户输入的值,最后使用ul.insertBefore(li,ul.children[0])插入创建好的li标签。
注意:因为留言板显示最新的留言,所以插入在li的最前面。
完整代码如下:
<body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> <script> //获取元素 var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); //注册事件 btn.onclick = function() { if (text.value == '') { alert('你没输内容'); return false; } else { var li = document.createElement('li'); li.innerHTML = text.value; ul.insertBefore(li, ul.children[0]); } text.value = ''; } </script> </body>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)