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程序设计有所帮助。

赞 (0)

相关推荐

  • 通过JS动态创建一个html DOM元素并显示

    近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个

  • JavaScript动态创建div等元素实例讲解

    JavaScript动态创建div等元素实例讲解

    本文实例讲解了JavaScript动态创建div等元素的详细代码,分享给大家供大家参考,具体内容如下 效果图: 为了节省时间,就直接贴代码了! <html> <head> <title>js动态创建div等元素实例</title> <style type="text/css"> </style> </head> <body> <script language="javascr

  • js 动态创建 html元素

    js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500px; position:relative;} #s{ background:#FFF; width:1px; height:1px; overflow:hidden; position:absolute;} 没事造星星玩 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript动态创建及删除元素的方法

    本文实例讲述了javascript动态创建及删除元素的方法.分享给大家供大家参考.具体分析如下: 在DOM中我们可以方便快速的动态删除与删除dom元素,这里我们就来给各位朋友简单的介绍一下. 例1: 动态创建一个按钮 复制代码 代码如下: <html> <head> <title>动态创建按钮</title> <script language="javascript"> var a,b,ab,ba,c; function cr

  • JS动态创建DOM元素的方法

    本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

  • JavaScript动态生成二维码图片

    1.html代码 <div id="qrcode" style="width:200px; height:200px;position: fixed;bottom: 40%; right: 20%;"></div> 2.引入外部js文件 <script src="QRCode.js"></script> 3.方法调用 var qrcode = new QRCode(document.getEleme

  • javascript元素动态创建实现方法

    本文实例讲述了javascript元素动态创建实现方法.分享给大家供大家参考.具体分析如下: document.write只能在页面加载过程中才能动态创建 可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用元素的appendChild方法将 新创建元素添加到相应的元素下 举例如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

  • 基于JavaScript实现动态创建表格和增加表格行数

    在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>

  • JavaScript如何动态创建table表格

    JavaScript如何动态创建table表格

    两种JavaScript动态创建table表格的方法,分享给大家,具体实现如下 方法一:最原始的方法,创建一一元素 var a1=document.createElement("table"); var a2=document.createElement("tbody"); var a3=document.createElement("tr"); var a4=document.createElement("td"); //开

  • JavaScript实现动态表格的方法详解

    JavaScript实现动态表格的方法详解

    目录 JavaScript实现动态表格 基本效果如下 代码如下: 第一种方式(较简单,建议使用) 方式二 改进版 代码如下: 总结 JavaScript实现动态表格 (改建版,代码见最下面) 基本效果如下 点击添加,可以将输入框中的值,新增到表格中:点击删除可以删除本行内容. 代码如下: 第一种方式(较简单,建议使用) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

  • jQuery实现表格元素动态创建功能

    jQuery实现表格元素动态创建功能

    Jquery实现表格元素的动态创建,本质是通过构造一个Dom Node节点,并且拼接到表格的Dom树上的子叶位置. HTML正文: 用户:<input type="text" id="user"/> 邮箱:<input type="text" id="mail"/> 手机:<input type="text" id="phone"/> <br&g

  • JavaScript实现动态创建CSS样式规则方案

    现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案. 1.我们通过 事件代理(event delegation) 让事件监听更高效, 2.我们利用 函数降频技术(function debouncing)来限制一段时间内给定方法被调用的次数,请参考:如何防止事件函数的高频触发(中文翻译) 3.我们使用 JavaScript加载器 来加载我们确实需要的那部分资源,等等. 还有一种方式,可以让我们的页面更加的快速和高效.那就是直接通过JS动态地添加和删除样式表

  • javascript显示动态时间的方法汇总

    1.第一种方法 <table> <tr> <td>当前时间:</td> <td id="CurrentTime"></td> <script type="text/javascript"> function changetime(){ var ary = ["星期日","星期一","星期二","星期三",

  • 基于jquery的关于动态创建DOM元素的问题

    复制代码 代码如下: <script type="text/javascript"> document.getElementById("testDiv").innerHTML ="动态创建的div"; </script> 而且用的应该是还是乐此不疲,但是有多少人知道这是错误的做法!错误的原因: (1) 在页面加载时改变了页面的结构. 在IE6中如果网络变慢或者页面内容太大就会出现"终止操作"的错误. 也

  • javascript转换字符串为dom对象（字符串动态创建dom）

    前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>'); 那么今天的目的就是教大家怎么去实现一个这样

随机推荐