这篇文章主要为大家详细介绍了JavaScript DOM实现简单留言板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript DOM实现简单留言板的具体代码,供大家参考,具体内容如下
效果图:
先准备html代码:
css代码如下:
接下来是最重要的部分,我们先使用document.querySelector()获取我们要操作的对象:button,textarea和ul;
再给button注册点击事件,中间加入判断是否有输入内容,如有输入内容,则继续操作,使用document.createElement(‘li’)创建li标签,再使用li.innerHTML获取textarea控件用户输入的值,最后使用ul.insertBefore(li,ul.children[0])插入创建好的li标签。
注意:因为留言板显示最新的留言,所以插入在li的最前面。
完整代码如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持0133技术站。
以上就是JavaScript DOM实现简单留言板的详细内容,更多请关注0133技术站其它相关文章!