创建节点 模仿发布留言

        <textarea></textarea>
		<button>发送</button>
		<ul></ul>

HTML代码

            //获取元素
			var btn = document.querySelector('button');
			var text = document.querySelector('textarea');
			var ul = document.querySelector('ul');

js代码    首先获取元素

             //给btn按钮绑定点击事件
			btn.onclick = function(){
				//判断文本框里是否为控
				if(text.value == ''){
					alert('请输入....');
				}else{
					//利用createElement创建元素节点li
					var li = document.createElement('li');
					//把文本域里的值给新创建的元素节点  text.value(文本域的值)
					li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
					//把创建的元素节点添加到ul里     ul.children[0](使新添加的元素节点永远在第一排）
					ul.insertBefore(li,ul.children[0]);
					//删除节点，删除的是当前a所在的li  删除的是a的父亲li
					var as = document.querySelectorAll('a');  //获取元素
					//循环
					for(var i = 0;i<as.length;i++){
						as[i].onclick = function(){
							//this当前a   parentNode获取a的父对象    this.parentNode是当前a的父亲li
							//删除节点，必须是删除父亲中的一个儿子   this.parentNode(li)的父亲是ul  所以前面是ul
							ul.removeChild(this.parentNode); 
						}
					}
				}
			}
		</script>

首选给btn按钮注册点击事件

text.value判断文本域里是否为空，如果为空alert('请输入....');

如果不为空

利用createElement创建元素节点

点击发送之后文本域的值要赋给创建的元素节点li  但是要在创建了有了li之后赋值 li.innerHTML = text.value

+ "<a href='javascript:;'>删除</a>"; 后面加一个删除

添加节点 把创建的节点添加到 ul 里  ul.insertBefore(li,ul.children[0]);

var as = document.querySelectorAll('a');  获取元素

循环添加鼠标点击事件

  注意：删除节点是删除父亲中的一个儿子    a是li的一个儿子，而我们是要删除整个li

this.parentNode 当前a的父对象，也就是li   li的父级是ul

ul.removeChild(this.parentNode); 所以删除节点是这样