案例:简单版发布留言功能
<textarea name="" id=""></textarea > <button>发布</button> <ul></ul> <script> // 1. 获取元素 var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); // 2. 注册事件 btn.onclick = function() { if (text.value == '') { alert('您没有输入内容'); return false; } else { //(1)创建元素 var li = document.createElement('li'); // 先有li才能赋值 // 阻止链接跳转需要添加javascript:void(0);或者javascript:; li.innerHTML = text.value + "<a href='javascript:;'></a>" //(2)添加元素 // ul.appendChild(li); ul.insertBefore(li, ul.children[0]); //(3)删除元素,删除的是当前a链接所在的li var as document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { // 删除的是当前a所在的li,也就是a的父元素 ul.removeChild(this.parentNode); } } </script>