js怎麼加入元素新節點？（圖文詳解）-js教程-PHP中文網

js怎麼加入元素新節點？（圖文詳解）

青灯夜游

發布： 2018-10-15 14:46:17

原創

5489 人瀏覽過

js怎麼加入元素新節點？這篇文章就跟大家介紹在js中如何實作新增元素新節點的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

js要新增元素新節點，就必須先建立好新的元素節點，然後在把新的元素節點加入到html頁面上。下面我們透過一個簡單的程式碼範例來詳細了解JavaScript要新增元素新節點的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js添加元素新节点</title>
		<style>
			#div{
				width: 200px;
				height: 150px;
				border: 2px solid red;
				margin: 50px auto;
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<div id="div">
			<p id="p1">这是一个段落</p>
			<p id="p2">这是另一个段落</p>
		</div>

		<script>
			var para = document.createElement("p");
			var node = document.createTextNode("这是一个新的段落。");
			para.appendChild(node);

			var element = document.getElementById("div");
			element.appendChild(para);
		</script>
	</body>
</html>

登入後複製

效果圖：

js怎麼加入元素新節點？（圖文詳解）