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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, 元素
动态创建
javascript 创建元素、jquery动态创建元素、jq动态创建元素、js 动态创建元素、mui 动态创建元素,以便于您获取更多的相关知识。

时间: 2024-12-30 12:48:33

javascript元素动态创建实现方法_javascript技巧的相关文章

javascript元素动态创建实现方法

  本文实例讲述了javascript元素动态创建实现方法.分享给大家供大家参考.具体分析如下: document.write只能在页面加载过程中才能动态创建 可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用元素的appendChild方法将 新创建元素添加到相应的元素下 举例如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html xmlns="http://www.w

JavaScript如何动态创建table表格_javascript技巧

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

javascript转换字符串为dom对象(字符串动态创建dom)_javascript技巧

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

JS动态创建元素的两种方法_javascript技巧

本文为大家分享了js创建元素的两种方法供大家参考,具体内容如下 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式     为了更好的理解,设定一个应用场景.     随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图

动态加载JavaScript文件的两种方法_javascript技巧

这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码.第二种是,动静创建一个script标签,配置其src属性,经过把script标签插入到页面head来加载js,相当于正在head中写了一个<script src="..."></script>,只可是这个script标签是用js动静创建的 比喻说是我们

JavaScript实现同步于本地时间的动态时间显示方法_javascript技巧

本文实例讲述了JavaScript实现同步于本地时间的动态时间显示方法.分享给大家供大家参考.具体分析如下: 动态显示时间的例子非常简单,了解JavaScript之后就是几行的代码便能够完成的事情, 但是对于一些未接触过JavaScript的人来说,几乎很大工程的样子,然后在网上苦苦寻觅代码,之后在茫茫的html代码中寻求不到,最终得不到要领.一.基本目标 实现一个随同客户端(浏览者机器上的)时间的网页文本时间,使用最短的代码. 二.制作过程 复制代码 代码如下: <!DOCTYPE html

JS实现设置ff与ie元素绝对位置的方法_javascript技巧

本文实例讲述了JS实现设置ff与ie元素绝对位置的方法.分享给大家供大家参考,具体如下: function Show_menu(liid,divid) { var li=document.getElementById(liid); var div=document.getElementById(divid); div.style.left=getLeft(li)+140+'px'; div.style.top= getTop(li)+'px'; var tt=div.style.top; div

JS实现向表格中动态添加行的方法_javascript技巧

本文实例讲述了JS实现向表格中动态添加行的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过表格对象的insertRow方法动态向表格的最顶端添加新的行 <!DOCTYPE html> <html> <head> <script> function insRow() { var x=document.getElementById('myTable').insertRow(0); var y=x.insertCell(0); var z=x.ins

javascript清空table表格的方法_javascript技巧

本文实例讲述了javascript清空table表格的方法.分享给大家供大家参考.具体如下: 1. 通常方法 循环table的rows,然后一个一个删除. 这个方法是通常的方法,可行,但是效率不好. 2. 另一个方法 var artTable = document.getElementById("artical_table"); console.debug(artTable.getElementsByTagName("thead")[0]); var artBody