javascript - 如何在dom中存储和追加大字符串

Question

我需要使用 jquery 将大数据同义地 append 到 dom，我是否将它们存储在变量中，如下方法给出了非法 token 错误，我猜是因为它是多行字符串？

如何使其成为单行或任何其他方式 append ？

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>";

Answer 1

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

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

或

您可以 append \ 使其成为多行字符串

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