十三、动态创建元素 - 军军小站|张军博客

使用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" >
< head >
     < title > jQuery - 创建DOM模型 </ title >
     < script src ="../Static/common/js/jquery-1.5.1.min.js" type ="text/javascript" ></ script >
</ head >
< body >
     
     < div id ="divMsg" ></ div >
     < div id ="divHolder" ></ div >
     
     < script type ="text/javascript" >
         var thisPage = {
            initialize: function () { // 加载时执行
                 this .initializeDom();
                 this .initializeEvent();

                 this .createDom1();
                 this .createDom2();
                 // this.createDom3();
            },
            initializeDom: function () { // 初始化DOM
                 this .holder = document.getElementById( " divHolder " );
                 this .divMsg = document.getElementById( " divMsg " );
            },
            initializeEvent: function () { // 事件绑定

            },
            createDom1: function () {
                 var startDate = new Date();
                 var builder = new Array();
                 for ( var i = 0 ; i < 100 ; i ++ ) {
                    builder.push( " <div style='width:100px; height:20px;background-color:#eee'>test</div> " );
                };
                 this .holder.innerHTML = builder.join( "" );
                 this .divMsg.innerHTML += " 使用innerHTML耗时： " + ( new Date() - startDate);
            },
            createDom2: function () {
                 var startDate = new Date();
                 for ( var i = 0 ; i < 100 ; i ++ ) {
                     var oDiv = document.createElement( " div " );
                     var oText = document.createTextNode( " text " );
                    oDiv.appendChild(oText);
                     this .holder.appendChild(oDiv);
                    oDiv.style.width = " 100px " ;
                    oDiv.style.height = " 20px " ;
                    oDiv.style.backgroundColor = " #eee " ;
                };
                 this .divMsg.innerHTML += " <br/>使用createElement耗时： " + ( new Date() - startDate);
            },
            createDom3: function () {
                 var startDate = new Date();
                jQuery( " <span/> " ).attr( " id " , " mySpan " );
                jQuery( " <span style='width:100px; height:20px;background-color:#eee'>test</span> " ).appendTo( this .holder);

            },
            createDom4: function () {
                jQuery( " <span>test</span><span>test</span><span>test</span><span>test</span> " ).appendTo( this .holder);

            }
        }

        $(thisPage.initialize());
     </ script >
</ body >
</ html >

使用jQuery创建对象

在jQuery创建对象，需要使用jQuery核心函数。

名称	类型	说明
jQuery(html,ownerDocument)	Function	根据提供的原始 HTML ，动态创建 DOM 元素。最简单的不包含属性的元素，比如 <div> 由 documen.createElement 创建，其他格式的字符串将使用 innerHtml 创建。不能创建 html head title body 等无法放在 div 中的元素。注意正确的格式。如 <span> 要写成 <span/>
返回值	jQuery	新创建元素的引用，并以 jQuery 对象的形式返回
Html 参数	String	要创建的 html 字符串
ownerDocument	documnet ( 可选 )	创建 DOM 元素所在的文档

jQuery(html,ownerDocument)函数用来创建DOM元素，并且以jQuery对象的形式返回：jQuery("<span/>").attr("id","mySpan");

所以可以使用链式操作来操作DOM对象的属性和样式。

即使用innerHtml的方式创建元素，在内部也会首先使用document.createElement创建一个div元素，然后调用div的innerHtml方法。

创建对象常见错误

避免在DOM未加载完就改变DOM结构。

十三、动态创建元素

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义