DOM 动态创建节点实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DOM 动态创建节点</title>
     <script>
     //创建一本书
     function newNode(){
	     	//1.创建一个元素节点
	      var book=	document.createElement("li");
	       //2.创建一个文本节点
	       var bookNode=document.createTextNode("《西游记》");
	       //3.把文本添加到Li节点中
	       book.appendChild(bookNode);
	       //4.把li节点添加到ul中
	       //获取ul元素节点
	//     var books=document.getElementById("books");
	       //appendChild():把子节点添加到父节点的最后位置
	//     books.appendChild(book);
	       
	       //获取指定插入的位置
	       var book2=document.getElementById("book2");
	       //插入  insertBefore(新节点，插入位置)：把新节点添加到某一个元素的前面
	       book2.parentElement.insertBefore(book,book2);
     }
      
      //删除节点
     function rmChild(){
	     	//1.获取要删除的父节点
	     	var stars=document.getElementById("stars");
	     	//2.获取要删除的子节点
	     	var fanbingbing=document.getElementById("fanbingbing");
	     	//3.执行删除
	     	stars.removeChild(fanbingbing);
     }
      
	</script>
</head>
<body>
    <h2 >喜欢的书籍</h2>
		<input id="b1" type="button" value="增加一本书" onclick="newNode()" />
		<input id="b2" type="button" value="删除节点" onclick="rmChild()"/>
		<br />
		<ul id="books">
		<li id="book1">《三国演义》</li>
		<li id="book2">《水浒传》</li>
		<li>《红楼梦》</li>
	</ul>
		<h2>你最喜欢哪些明星</h1>
	<ul id="stars">
		<li id="fanbingbing">范冰冰</li>
		<li id="liudehua">刘德华</li>
		<li>王宝强</li>
	</ul>
</body>
</html>
DOM 动态创建节点实例

猜你喜欢
