JavaScript----增加删除修改

最新推荐文章于 2023-10-15 10:22:53 发布

Vangogh_java

最新推荐文章于 2023-10-15 10:22:53 发布

阅读量440

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文提供了一个使用JavaScript操作DOM的具体示例，包括修改、添加及删除DOM节点的方法。通过实例演示了如何利用getElementById、createTextNode、appendChild、insertBefore和removeChild等API实现DOM的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题JavaScript操作DOM节点</title>
<center>
<script type="text/javascript">
	function Modify(){
	document.getElementById("txt").innerHTML="添加：";
	document.getElementById("userName").value="添加的文字";	
	}
	function add(){
		var para=document.createElement("P");
		var node=document.createTextNode("插入文本001");	
		var para2=document.createElement("P");
		var node2=document.createTextNode("插入文本002");	
		para.appendChild(node);
		para2.appendChild(node2);
		var parent=document.getElementById("parent");
		var son1=document.getElementById("son1");
		parent.insertBefore(para, son1);
		parent.appendChild(para2);
	}
	function remove(){
		var parent=document.getElementById("parent");
		var son1=document.getElementById("son1");
		parent.removeChild(son1);
	}
</script>
</head>
<body>
<div id="parent">
<div id="son1">
	<font iD="txt">:</font><input type="text" id="userName" name="userName"/>
</div>
</div>
<input type="button" value="modifyDOM节点!" onclick="Modify()"/>
<input type="button" value="addDOM节点!" onclick="add()"/>
<input type="button" value="remove节点!" onclick="remove()"/>
</body></center>
</html>