javascript动态创建 div注意细节

(1) 在页面加载时改变了页面的结构. 在ie6中如果网络变慢或者页面内容太大就会出现"终止操作"的错误. 也就是说"永远不要在页面加载时改变页面的dom模型".

(2) 使用修改html内容添加元素,  不符合dom标准. 在实际工作中也碰到过使用这种方法修改内容后,
某些浏览器中并不能立刻显示添加的元素, 因为不同浏览器的显示引擎是不同的. 但是如果我们使用dom的createelement创建对象,
在所有的浏览器中几乎都可以. 但是在jquery中如果传入的而是一个完整的html字符串, 内部也是使用innerhtml.
所以也不是完全否定innerhtml函数的使用.

所以从现在开始请摒弃这种旧知识, 使用下面介绍的正确方法编程.

 
关于使用html dom创建元素本文不做详细介绍, 下面举一个简单的例子:

第一种正确方式: //使用dom标准创建元素 var select = document.createelement("select");    select.options[0] = new option("加载项1", "value1");    select.options[1] = new option("加载项2", "value2");    select.size = "2";    var object = testdiv.appendchild(select);
通过使用 document.createelement 方法我们可以创建dom元素, 然后通过appendchild方法为添加到指定对象上.

第二种方式: 使用jquery

 

当html字符串是没有属性的元素是, 内部使用document.createelement创建元素, 比如:

//jquery内部使用document.createelement创建元素:

$("").css教程("border","solid 1px #ff0000").html("动态创建的div").appendto(testdiv);
否则使用innerhtml方法创建元素:

//jquery内部使用innerhtml创建元素:

$("动态创建的div").appendto(testdiv)

时间: 2024-09-24 15:32:48

javascript动态创建 div注意细节的相关文章

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

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

Javascript动态创建div的方法_javascript技巧

本文实例讲述了Javascript动态创建div的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

js动态创建div等元素实例

为了节省时间,就直接贴代码了!希望大家多多的关注我! <html> <head> <title>js动态创建div等元素实例</title> <style type="text/css"> </style> </head> <body> <script language="javascript"> var Test={ createDiv:function()

Javascript动态创建表格及删除行列的方法

 本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

javascript动态创建链接的方法

  本文实例讲述了javascript动态创建链接的方法.分享给大家供大家参考.具体分析如下: 动态创建链接示例: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; c

求助:请问如何动态创建div,并且每创建一次,所有div顺序排列,超过页面宽度 则自动换行?没有思路 请高手指点

问题描述 请问如何动态创建div,并且每创建一次,所有div顺序排列,超过页面宽度则自动换行?没有思路请高手指点以下是div的内容<divclass="small_img2"style="float:left;margin-right:20px;left:-50%;text-align:center;position:relative;"><tablewidth="150"border="0"cellspac

javascript动态创建链接的方法_javascript技巧

本文实例讲述了javascript动态创建链接的方法.分享给大家供大家参考.具体分析如下: 动态创建链接示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态添加链接</title&

jquery动态创建div与input的实例代码_jquery

无意中发现的,做为收藏,以备后绪查看时用. 实例如下: <html> <head> <title>jjquery动态创建div与input</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script> <!--动态创建div--> $(function (){ $(&

Javascript动态创建表格及删除行列的方法_javascript技巧

本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"