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

更新时间：2014年01月24日 15:22:19 作者：

本文用示例为大家介绍下动态创建一个元素createElement及删除一个元素，感兴趣的朋友可以参考下

 
<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> 

您可能感兴趣的文章:

JavaScript中的 new 命令
这篇文章主要介绍了JavaScript中的new 命令，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
用ADODB.Stream转换
用ADODB.Stream转换...
2007-01-01
实现非常简单的js双向数据绑定
Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。本文给大家详细介绍js双向数据绑定，感兴趣的朋友参考下
2015-11-11
js 鼠标事件的抓取
鼠标事件的抓取实现代码，需要的朋友可以参考下。
2010-04-04
使用Bootstrap typeahead插件实现搜索框自动补全的方法
这篇文章主要介绍了使用Bootstrap typeahead插件实现搜索框自动补全的方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
js回调函数原理与用法案例分析
这篇文章主要介绍了js回调函数原理与用法,结合具体案例形式分析了js回调函数基本概念、原理、使用方法及操作注意事项,需要的朋友可以参考下
2020-03-03
js验证真实姓名与身份证号是否匹配
使用javascript技术验真实姓名，要用到unicode字符来匹配，由于中国人的姓名长度一般是在2-4这个范围内，所以重复匹配{2,4}次。接下来，通过本文给大家分享js验证省份证号与真实姓名是否匹配，需要的朋友可以参考下
2015-10-10
JavaScript可否多线程? 深入理解JavaScript定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感
2012-05-05
函数式JavaScript编程指南
函数式JavaScript编程指南...
2007-02-02
JavaScript实现简单图片翻转的方法
这篇文章主要介绍了JavaScript实现简单图片翻转的方法,涉及javascript操作图片与数组的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04