Javascript之DOM(Document对象2)-CSDN博客

本文链接：https://blog.csdn.net/summer7310/article/details/28885993

1添加网页元素

添加网页元素主要使用document.createElement()方法和Element.appendChild()方法实现。

使用document.createElement()方法用于创建一个元素，新创建的元素是独立的，和HTML文档没有任何关系，

使用Element.appendChild()方法将新创建的网页元素添加到DOM中。

<html>
	<head>
		<meta charset="utf-8" />
		<title>添加网页元素</title>
		<script type= "text/javascript">
			function addTxt(){
				//创建一个INPUT元素
				var txt = document.createElement("input");
				//设置元素为文本框
				txt.type = "text";
				txt.value = "新添加的文本框";
				//将文本框添加到层中
				var div = document.getElementById("disDiv");
				div.appendChild(txt);
			}
		</script>	
	</head>
	<body>
		<center>
			<div id="disDiv" style="text-align:center; border:1px solid blue; width:450px; height:100px;">
			</div>
			<input type="button" value="添加文本框" οnclick="addTxt()" />
		</center>
	</body>
</html>

每单击一次按钮，层中添加一个文本框，每单击一次执行一次addTxt()函数。