<script> var title = document.getElementById('title');//或得表单的title元素 var textarea = document.getElementById('form_tet');//获得表单多行文本输入框元素 var con = document.getElementById('con');//获得列表元素 var lis = con.children;//获得列表的子元素 var submit = document.getElementById('submit'); submit.onclick = function () { var newLi = document.createElement('li');//创建节点 var newDiv = document.createElement('div');//创建一个div newDiv.setAttribute('class', 'con_title');//给div添加一个类名 var newH3 = document.createElement('h3'); var newSpan = document.createElement('span'); newSpan.innerHTML = '删除';//设置span里的 内容 var newp = document.createElement('p'); if (title.value == '') {//判断输入框是否为空,若为空则直接返回函数 alert('标题不能为空'); return 0; } else if (textarea.value == '') { alert('内容不能为空'); return 0; } newH3.innerHTML = title.value; newp.innerHTML = textarea.value; /*往各级里插入新建的节点*/ newDiv.appendChild(newH3); newDiv.appendChild(newSpan); newLi.appendChild(newDiv); newLi.appendChild(newp); con.insertBefore(newLi, lis[0]); /*将输入框里的内容清空*/ title.value = ''; textarea.value = ''; /*在插入一个li节点时给删除块加一个点击事件*/ newSpan.onclick = function () { con.removeChild(newLi); } } </script>
纯js模仿博客评论
最新推荐文章于 2022-03-23 12:34:46 发布