动态的创建一个元素 createElement 和删除一个元素

最新推荐文章于 2024-05-20 21:08:29 发布

原创最新推荐文章于 2024-05-20 21:08:29 发布 · 6.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript基础部分学习专栏收录该内容

51 篇文章

订阅专栏

本文介绍如何使用JavaScript动态创建及删除HTML元素。通过`createElement`、`appendChild`和`removeChild`方法实现元素的增删操作。示例中创建了一个指向百度的超链接，并将其添加到指定的div容器内，同时也提供了删除该元素的功能。

关键词：createElement appendChild removeChild

<html>
<script language = "javascript" type = "text/javascript">
		function test(){
			//创建元素
			var myElement = document.createElement("a");//a是想创建的html元素标签名
			//给创建的元素添加必要的信息
			myElement.href = "http://www.baidu.com";
			myElement.innerText = "连接到百度";
			myElement.id = "id1";
			//myElement.style.top = "300px";
			//myElement.style.left = "500px";
			//myElement.style.position = "absolute";
			//把创建的元素添加到body 对象上
			//document.body.appendChild(myElement);
			//将元素添加到div
			document.getElementById("div1").appendChild(myElement);
		}
		function test2(){
			//删除一个元素
			//也可以通过属性获得新增元素的父元素
			//document.getElementById("id1").parentNode
			document.getElementById("div1").removeChild(document.getElementById("id1"));	
		}
</script>	
<body>
<input type = "button" onclick = "test()"	 value = "动态的创建一个超链接"/>
<input type = "button" onclick = "test2()"	 value = "动态的删除添加的元素"/>
<div id = "div1" style = "width:200px;height:300px;border:1px solid red">
	div1
</div>
</body>
</html>