文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在dom中存储和追加大字符串

问如何在dom中存储和追加大字符串
EN

Stack Overflow用户

提问于 2014-01-19 09:22:42

回答 2查看 322关注 0票数 0

我需要使用jquery将大量数据动态地附加到dom中，hoe是否将它们存储在变量中，因为下面的方法会导致非法的令牌错误，我猜是因为它是多行字符串吗？

如何使其单行或任何其他方式附加？？

JQuery代码：：

var tab_data="<div class='table-responsive'><table class='table fixed' id='topics'><tbody><tr class='row'><td class='col-md-1 droppable corner_piece ui-droppable' id='row-1'>              </td><td class='col-md-1 droppable border_bg second_piece ui-droppable' id='row-9'>  </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-17'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-25'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-33'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-40'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-32'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-24'>    </td> <td class='col-md-1 droppable border_bg second_last_piece ui-droppable' id='opp-16'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-8'>    </td>
            </tr> <tr class='row'> <td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-2'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-10'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-18'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-26'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-34'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-39'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-31'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-23'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-15'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-7'>    </td>
            </tr> <tr class='row'> <td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-3'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-11'>               </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-19'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-27'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-35'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-38'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-30'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-22'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-14'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-6'>    </td> </tr>
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-4'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-12'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-20'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-28'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-36'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-37'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-29'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-21'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-13'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-5'>    </td> </tr>
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-5'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-13'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-21'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-29'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-37'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-36'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-28'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-20'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-12'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-4'>    </td> </tr>
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-6'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-14'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-22'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-30'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-38'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-35'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-27'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-19'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-11'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-3'>    </td> </tr>
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-7'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-15'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-23'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-31'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-39'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-34'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-26'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-18'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-10'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-2'>    </td> </tr>
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-8'>    </td><td class='col-md-1 droppable border_bg second_piece ui-droppable' id='row-16'></td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-24'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-32'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-40'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-33'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-25'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-17'>    </td> <td class='col-md-1 droppable border_bg second_last_piece ui-droppable' id='opp-9'>    </td><td class='col-md-1 droppable corner_piece last_piece ui-droppable' id='opp-1'>    </td></tr>     
  </tbody></table><div id='display_board'></div></div>";

javascript

jquery

html

append

回答 2

Stack Overflow用户

发布于 2014-01-19 09:26:50

我建议您使用字符串连接，如

var tabData = '<div class="table-responsive">'
tabData += '<span>';
tabData += 'Some data';
tabData += '</span>';
tabData += '</div>';

或

您可以附加\使其成为多行字符串。

var tabData = '<div class="table-responsive"> \
<span> \ 
Some data \
</span>\
</div>';

票数 2

Stack Overflow用户

发布于 2014-01-19 09:25:37

可以在多行字符串的行尾使用\。

var tab_data = "<div class='table-responsive'><table class='table fixed' id='topics'><tbody><tr class='row'><td class='col-md-1 droppable corner_piece ui-droppable' id='row-1'>              </td><td class='col-md-1 droppable border_bg second_piece ui-droppable' id='row-9'>  </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-17'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-25'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-33'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-40'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-32'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-24'>    </td> <td class='col-md-1 droppable border_bg second_last_piece ui-droppable' id='opp-16'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-8'>    </td>\
            </tr> <tr class='row'> <td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-2'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-10'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-18'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-26'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-34'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-39'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-31'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-23'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-15'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-7'>    </td>\
            </tr> <tr class='row'> <td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-3'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-11'>               </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-19'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-27'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-35'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-38'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-30'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-22'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-14'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-6'>    </td> </tr>\
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-4'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-12'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-20'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-28'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-36'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-37'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-29'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-21'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-13'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-5'>    </td> </tr>\
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-5'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-13'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-21'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-29'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-37'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-36'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-28'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-20'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-12'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-4'>    </td> </tr>\
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-6'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-14'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-22'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-30'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-38'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-35'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-27'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-19'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-11'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-3'>    </td> </tr>\
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-7'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-15'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-23'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-31'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-39'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-34'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-26'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-18'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-10'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-2'>    </td> </tr>\
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-8'>    </td><td class='col-md-1 droppable border_bg second_piece ui-droppable' id='row-16'></td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-24'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-32'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-40'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-33'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-25'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-17'>    </td> <td class='col-md-1 droppable border_bg second_last_piece ui-droppable' id='opp-9'>    </td><td class='col-md-1 droppable corner_piece last_piece ui-droppable' id='opp-1'>    </td></tr>\
  </tbody></table><div id='display_board'></div></div>";

或者您需要使用字符串连接，如

var string = 'line1'
   + 'line2'
   + 'line3'
   + 'line4';

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21215034

复制

相似问题

问如何在dom中存储和追加大字符串
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在dom中存储和追加大字符串EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在dom中存储和追加大字符串
EN