JavaScript----增加删除修改

最新推荐文章于 2023-09-01 16:53:15 发布

Vangogh_java

最新推荐文章于 2023-09-01 16:53:15 发布

阅读量405

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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节点!" οnclick="Modify()"/>
<input type="button" value="addDOM节点!" οnclick="add()"/>
<input type="button" value="remove节点!" οnclick="remove()"/>
</body></center>
</html>