原生js实现的创建和删除元素实例代码:
在实际应用中，往往需要动态的创建和删除指定的元素，下面就通过代码实例介绍一下如何实现此功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#thediv{
width:200px;
height:300px;
border:1px solid green;
}
</style>
<script type = "text/javascript">
function creat(){
var linkElement=document.createElement("a");
linkElement.href="http://www.softwhy.com";
linkElement.innerHTML="蚂蚁部落";
linkElement.id="theid";
var odiv=document.getElementById("thediv");
odiv.appendChild(linkElement);
}
function del(){
var odiv=document.getElementById("thediv");
odiv.removeChild(document.getElementById("theid"));
}
window.onload=function(){
var creatBt=document.getElementById("creatBt");
var deBt=document.getElementById("deBt");
creatBt.onclick=function(){creat()}
deBt.onclick=function(){del()}
}
</script>
</head>
<body>
<input type="button" id="creatBt" value="动态的创建一个超链接"/>
<input type="button" id="deBt" value="动态的删除添加的元素"/>
<div id="thediv"></div>
</body>
</html>
以上代码实现了我们的要求，点击相应按钮可以添加或者删除元素，代码很简单就不多介绍了，具体可以参阅相关阅读。
相关阅读:
1.document.createElement()函数可以参阅js的createElement()和appendChild()函数的作用一章节。
2.removeChild()函数可以参阅javascript的removeChild()函数用法详解一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11846
更多内容可以参阅:http://www.softwhy.com/javascript/
时间： 2024-12-22 05:52:33