javascript元素动态创建实现方法

更新时间：2015年05月13日 11:47:09 作者：永远爱好写程序

这篇文章主要介绍了javascript元素动态创建实现方法,涉及javascript操作元素的相关技巧,需要的朋友可以参考下

本文实例讲述了javascript元素动态创建实现方法。分享给大家供大家参考。具体分析如下：

document.write只能在页面加载过程中才能动态创建

可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用元素的appendChild方法将
新创建元素添加到相应的元素下

举例如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Dom动态创建元素</title>
 <script type="text/javascript">
 function CreateButton() {
  var div = document.getElementById("divMain");
  var myButton = document.createElement("input");
  myButton.type = "button";
  myButton.value = "我是动态添加的";
  //myButton.id="btn"; 注意:如果设置id的话要避免重复
  div.appendChild(myButton); //添加到div上
 }
 </script>
</head>
<body>
 <div id="divMain"></div>
 <input type="button" value="添加元素" onclick="CreateButton()" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

在模板页面的js使用办法
在使用了母板页面的项目中使用js获取其中的标签id 需要先加载到本地看看他在浏览时候的页面源代码然后确定他的id
2010-04-04
JS获取下拉列表所选中的TEXT和Value的实现代码
本篇文章主要是对JS获取下拉列表所选中的TEXT和Value的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
解决Layui中templet中a的onclick参数传递的问题
今天小编就为大家分享一篇解决Layui中templet中a的onclick参数传递的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
js中cookie的使用详细分析
JavaScript中的另一个机制：cookie，则可以达到真正全局变量的要求。 cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。
2008-05-05
JS TextArea字符串长度限制代码集合
因为业务需求今天做了一个textarea文本域字符串长度限制的方法，其实网上已经有了很多相关的解决方案，但在输入日语时，在IE存在BUG，我的这个版本就是针对这种情况的
2012-10-10
子父窗口之间的操作
子父窗口之间的操作...
2006-07-07
JS 打印功能代码可实现打印预览、打印设置等
一个不错的JS 打印功能代码，包括打印预览、打印设置等，里面整合了很多知识，是一个不错的学习案例
2014-10-10
JS触摸与手势事件详解
这篇文章主要为大家详细介绍了JS触摸与手势事件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JS前端模块化原理与实现方法详解
这篇文章主要介绍了JS前端模块化原理与实现方法,结合实例形式分析了JS前端模块化具体概念、功能、原理、实现方法及相关操作注意事项,需要的朋友可以参考下
2020-03-03
基于Three.js实现360度全景图片
这篇文章主要为大家详细介绍了基于Three.js实现360度全景图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12