Reputation: 3913

How to store and append large string in dom

I need to append large data to dom synamically using jquery , hoe do i store them in variable as below method gives ILLEGAL token error, i guess beacause it is multi-line string ?

How to make it single line or any other way to append??

JQuery code::

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

Upvotes: 0

Answers (2)

Satpal

Reputation: 133403

I will suggest you use string concatenation like

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

OR

You can append \ to make it multiline string

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

Upvotes: 2

Arun P Johny

Reputation: 388316

You can use a \ at the end of a line in a multi line string

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

or you need to use string concatenation like

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

Upvotes: 1

How to store and append large string in dom

Answers (2)

OR

Related Questions