编程 Javascript

javascript元素动态创建实现方法

Posted in Javascript onMay 13, 2015

本文实例讲述了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程序设计有所帮助。

javascript元素动态创建实现方法

- Author -

永远爱好写程序

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS URL传中文参数引发的乱码问题

Sep 02 Javascript

javascript右下角弹层及自动隐藏(自己编写)

Nov 20 Javascript

jQuery过滤特殊字符及JS字符串转为数字

May 26 Javascript

有关suggest快速删除后仍然出现下拉列表的bug问题

Dec 02 Javascript

Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法

Feb 27 Javascript

JavaScript实现图片切换效果

Aug 12 Javascript

node中的密码安全(加密)

Sep 17 Javascript

vue 里面的 $forceUpdate() 强制实例重新渲染操作

Sep 21 Javascript

基于p5.js 2D图像接口的扩展（交互实现）

Nov 30 Javascript

使用Typescript开发微信小程序的步骤详解

Jan 12 Javascript

JS前端宏任务微任务及Event Loop使用详解

Jul 23 Javascript

Rust中的Struct使用示例详解

Aug 14 Javascript

javascript实现模拟时钟的方法

May 13 #Javascript

javascript实现点击后变换按钮显示文字的方法

May 13 #Javascript

javascript实现十秒钟后注册按钮可点击的方法

May 13 #Javascript

javascript中clipboardData对象用法详解

May 13 #Javascript

javascript实现在网页任意处点左键弹出隐藏菜单的方法

May 13 #Javascript

浅谈jQuery中replace()方法

May 13 #Javascript

js实现仿Windows风格选项卡和按钮效果实例

May 13 #Javascript