在jQuery中动态创建表

我正在使用jQuery动态构建一些


数据，但是我收到以下错误： 

 未捕获的错误：HIERARCHY_REQUEST_ERR：DOMexception3 
 这发生在脚本的appendTo部分，如下所示： 
 $('
').append( /* lots of stuff */ ).add( $('') ).append( /* some more */ ).appendTo($tbody);  $tbody是$('
');
 有人可以帮帮我吗？ 为了完整起见，这是整个代码： 
 $('#visitsContainer').show(); $div = $('').css('margin-top', '7px').css('width', '620px').addClass('groupBox'); $table = $('



 

 

').attr('cellpadding', '3').attr('cellspacing', '0').attr('width', '620'); $tbody = $(''); $('').append( $('').append( $('').append( $('').css('width', '45px').attr('valign', 'top').attr('rowspan', '3').attr('align', 'center').append( $('').attr('href', '/sparkx/' + userData.username).append( $('').attr('src', '/media/profile/40px/' + userData.photo).attr('alt', userData.firstname).attr('border', '1').css('border-color', '#c0c0c0').css('max-width', ' 42px').css('max-height', ' 40px') ) ).add( $(' ').css('border-bottom', '1px dotted #D21C5B').css('border-right', '1px dotted #D21C5B').css('width', '200px').append( $('').attr('href', '/sparkx/' + userData.username).append( $('').text(userData.fullname) ).add( $('
') ).add( userData.city) ) ).add( $(' ').css('border-bottom', '1px dotted #D21C5B').css('width', '110px').append( $('').attr('href', '/profile/' + userData.username + '/sendpm').css('line-height', '18px').append( $('').attr('src', '/templates/front/default/images/send_new_icon.gif').attr('alt', 'Stuur bericht').attr('border', '0').attr('align', 'left').css('margin-right', '5px') ).append( 'Stuur bericht') ) ).add( $(' ').css('border-bottom', '1px dotted #D21C5B').css('width', '170px').append( $('').text( 'Geplaatst op:') ).append( ' ' + posted ) ).add( $(' ').css('border-bottom', '1px dotted #D21C5B').css('width', '135px').append( (month > 0 ? $('').text('Was hier:') : $('').css('width', '1px').html(' ') )).append(month > 0 ? ' ' + months[month] + ' ' + year : '') ) ).add( (rating > 0 ? $('
').attr('colspan', '4').append( $('').css('color', '#D21C5B').text(userData.firstname + ' vond dit ').append( (rating == 3 ? $('').text('een aanrader ').add( $('').attr('src', '/templates/front/default/images/thumbGood.png').attr('alt', 'Goed').attr('height', '16').css('margin-left', '3px') ) : (rating == 2 ? $('').text('een aanrader ').add( $('').attr('src', '/templates/front/default/images/thumbAvg.png').attr('alt', 'Redelijk').attr('height', '16').css('margin-left', '3px') ) : $('').text('slecht ').add( $('').attr('src', '/templates/front/default/images/thumbBad.png').attr('alt', 'Slecht').attr('height', '16').css('margin-left', '3px') ) )) ) ) ) : '') ).add( (content ? $('
').attr('colspan', '4').append( $('').css('width', '100%').text(content).add( $('').css('float', 'right').css('clear', 'both').append( $('').attr('href', '/guide/editreaction/' + id).append( $('').text('edit') ).add( $('').attr('href', thisURL + '/rr/' + id).css('padding-left', '10px').append( $('').text('delete') )) )) ) ) : '') ).appendTo($tbody); $tbody.appendTo($table); $table.appendTo($div); $div.prependTo($('#visits')); 


	







 
	
		      	 我会认真地重新考虑你在做什么。 脚本的质量将变得不可维护并且难以调试。 你能不能做所有这个标记创建服务器端并使用ajax将其加载到dom中。 
 目前你拥有它的方式也会遇到性能问题，特别是如果你有大量的数据。 您正在创建多个jquery dom对象并执行多个追加。 最好是构建一个字符串或推送到一个数组并只附加到dom一次。 每个附加都会导致重绘，这是很昂贵的。 
 如果不这样做，为什么不使用专用的dom创建插件来使你的js更具可读性。 
 另一种选择是查看jTemplates ，它允许您在js之外定义标记，然后传入要显示的数据。 
 您还可以考虑使用经过试验和测试的网格插件之一，并有效地为您创建表结构。 谷歌jqgrid或flexigrid。 



	
		
		
	
 	


  在Zend Framework 1.9应用程序中开始使用jQuery的最佳方法是什么？
  Slick.js：获取当前和总幻灯片（即3/5）
	如何使用text（）函数插入html文本？
如何观察’a’标签的内容 –  jquery
jQuery  – 移动元素并返回其确切的先前位置？
插入元素的父元素之后
哪个更好：字符串html生成或jquery DOM元素创建？
jQuery empty（）vs text（”）
如何使用jquery突出显示所选列表项？
更改标记但保留属性和内容 –  jQuery / Javascript
     		



     

      
      
        
      




  Interesting Posts

当脚本插入DOM时jQuery .on（）没有绑定“jQuery方式”用HTML和文本混合替换一个文本节点？根据文本内容过滤jquery对象中的元素DOMNodeInserted在IE中Jquery replaceWith不工作如何使用d3.js选择为每个数据元素创建多个相邻节点jQuery将类添加到某些元素用jQuery删除3个最后一个div使用jQuery在树的中间插入（g）节点（SVG）Jquery  – 添加DOM元素时运行函数











        
          

            
              Back to top
              jQuery
            
            Copyright © Dovov 编程网 - All Rights Reserved.

').css('width', '45px').attr('valign', 'top').attr('rowspan', '3').attr('align', 'center').append( $('').attr('href', '/sparkx/' + userData.username).append( $('').attr('src', '/media/profile/40px/' + userData.photo).attr('alt', userData.firstname).attr('border', '1').css('border-color', '#c0c0c0').css('max-width', ' 42px').css('max-height', ' 40px') ) ).add( $('	').css('border-bottom', '1px dotted #D21C5B').css('border-right', '1px dotted #D21C5B').css('width', '200px').append( $('').attr('href', '/sparkx/' + userData.username).append( $('').text(userData.fullname) ).add( $(' ') ).add( userData.city) ) ).add( $('	').css('border-bottom', '1px dotted #D21C5B').css('width', '110px').append( $('').attr('href', '/profile/' + userData.username + '/sendpm').css('line-height', '18px').append( $('').attr('src', '/templates/front/default/images/send_new_icon.gif').attr('alt', 'Stuur bericht').attr('border', '0').attr('align', 'left').css('margin-right', '5px') ).append( 'Stuur bericht') ) ).add( $('	').css('border-bottom', '1px dotted #D21C5B').css('width', '170px').append( $('').text( 'Geplaatst op:') ).append( ' ' + posted ) ).add( $('	').css('border-bottom', '1px dotted #D21C5B').css('width', '135px').append( (month > 0 ? $('').text('Was hier:') : $(' ').css('width', '1px').html(' ') )).append(month > 0 ? ' ' + months[month] + ' ' + year : '') ) ).add( (rating > 0 ? $('
').attr('colspan', '4').append( $('').css('color', '#D21C5B').text(userData.firstname + ' vond dit ').append( (rating == 3 ? $('').text('een aanrader ').add( $('').attr('src', '/templates/front/default/images/thumbGood.png').attr('alt', 'Goed').attr('height', '16').css('margin-left', '3px') ) : (rating == 2 ? $('').text('een aanrader ').add( $('').attr('src', '/templates/front/default/images/thumbAvg.png').attr('alt', 'Redelijk').attr('height', '16').css('margin-left', '3px') ) : $('').text('slecht ').add( $('').attr('src', '/templates/front/default/images/thumbBad.png').attr('alt', 'Slecht').attr('height', '16').css('margin-left', '3px') ) )) ) ) ) : '') ).add( (content ? $('
').attr('colspan', '4').append( $(' ').css('width', '100%').text(content).add( $(' ').css('float', 'right').css('clear', 'both').append( $('').attr('href', '/guide/editreaction/' + id).append( $('').text('edit') ).add( $('').attr('href', thisURL + '/rr/' + id).css('padding-left', '10px').append( $('').text('delete') )) )) ) ) : '') ).appendTo($tbody); $tbody.appendTo($table); $table.appendTo($div); $div.prependTo($('#visits')); 我会认真地重新考虑你在做什么。脚本的质量将变得不可维护并且难以调试。你能不能做所有这个标记创建服务器端并使用ajax将其加载到dom中。目前你拥有它的方式也会遇到性能问题，特别是如果你有大量的数据。您正在创建多个jquery dom对象并执行多个追加。最好是构建一个字符串或推送到一个数组并只附加到dom一次。每个附加都会导致重绘，这是很昂贵的。如果不这样做，为什么不使用专用的dom创建插件来使你的js更具可读性。另一种选择是查看jTemplates ，它允许您在js之外定义标记，然后传入要显示的数据。您还可以考虑使用经过试验和测试的网格插件之一，并有效地为您创建表结构。谷歌jqgrid或flexigrid。在Zend Framework 1.9应用程序中开始使用jQuery的最佳方法是什么？ Slick.js：获取当前和总幻灯片（即3/5）如何使用text（）函数插入html文本？如何观察’a’标签的内容 – jquery jQuery – 移动元素并返回其确切的先前位置？插入元素的父元素之后哪个更好：字符串html生成或jquery DOM元素创建？ jQuery empty（）vs text（”）如何使用jquery突出显示所选列表项？更改标记但保留属性和内容 – jQuery / Javascript Interesting Posts 当脚本插入DOM时jQuery .on（）没有绑定 “jQuery方式”用HTML和文本混合替换一个文本节点？根据文本内容过滤jquery对象中的元素 DOMNodeInserted在IE中 Jquery replaceWith不工作如何使用d3.js选择为每个数据元素创建多个相邻节点 jQuery将类添加到某些元素用jQuery删除3个最后一个div 使用jQuery在树的中间插入（g）节点（SVG） Jquery – 添加DOM元素时运行函数 Back to top jQuery Copyright © Dovov 编程网 - All Rights Reserved.