DOM 增加节点

最新推荐文章于 2024-06-25 19:24:28 发布

老王笔记

最新推荐文章于 2024-06-25 19:24:28 发布

阅读量1.7k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/JSWANGCHANG/article/details/102642007

版权

JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

DOM 增加节点
1，创建节点
   语法：
       var ele = document.createElement("element");
2，增加节点
   将创建好的节点增加到网页中
   1, document.body.appendChild(elem);
       向body中追加element新元素
   2, parentNode.appendChild(elem)
       像parentNode节点添加新元素；
       parentNode 代表任意一个元素；
   3， parentNode.insertBefore(newElem, oldElem);
       将newElement插入到parentNode中oldElem之前；

3，删除节点
   注意： DOM中，删除节点的行为操作，只能由父元素发起；
   1，删除body中的直接子元素，
       document.body.removeChild(element);
   2，删除其他元素的子元素
       parentNode.removeChild(element);
       删除parentNode中的element子元素；

练习：
   模拟购物车布局
   1，商品名称，商品价格，购买数量文本框，和增加按钮
   2，点击增加按钮，列表中增加该商品项目
   3，商品列表内容：商品名称，商品价格，购买数量，操作
   4，操作中含有：修改和删除按钮

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
	<style>
		table{
			border:1px solid #000;
			border-collapse:collapse;
		
		}
		td{
			border: 1px solid #000;
			text-align:center;
		}
	</style>
 </head>
 <body>
	
	<table id="productList">
	<thead>
		<tr>
			<td><input type="text" id="productName" placeholder="商品名称"></td>
			<td><input type="text" id="productPrice" placeholder="商品价格"></td>
			<td><input type="text" id="productNum" placeholder="商品数量"></td>
			<td><button onclick="productAdd()">增加</button></td>
		</tr>
		<tr>
				<td>商品名称</td>
				<td>商品价格</td>
				<td>商品数量</td>
				<td>操&nbsp&nbsp&nbsp&nbsp作</td>
			
		</tr>
	</thead>
	</table>
	<script>
		function productAdd(){
			var elementList = document.getElementById("productList");
			//创建元素
			var eleProductNew = document.createElement("tr");
			var eleProductName = document.createElement("td");
			var eleProductPrice = document.createElement("td");
			var eleProductNum = document.createElement("td");
			var eleProOpera = document.createElement("td");
			var btnModify = document.createElement("button");
			var btnDelete = document.createElement("button");
			//增加元素
			elementList.appendChild(eleProductNew);
			eleProductNew.appendChild(eleProductName);
			eleProductNew.appendChild(eleProductPrice);
			eleProductNew.appendChild(eleProductNum);
			eleProductNew.appendChild(eleProOpera);
			eleProOpera.appendChild(btnModify);
			eleProOpera.appendChild(btnDelete);

			//设置元素的值
			eleProductName.innerText =  document.getElementById("productName").value;
			eleProductPrice.innerText =  document.getElementById("productPrice").value;
			eleProductNum.innerText =  document.getElementById("productNum").value;
			btnModify.innerText = "修改";
			btnDelete.innerText = "删除";
			
		}
		//对button增加函数事件
		function funDel(btn){
			//获取父元素的父元素，即button所在的tr；
			var eleTr = btn.parentNode.parentNode;
			console.log(111);
			//删除改节点

		}
	</script>
 </body>
</html>

效果：