Create a variable in jquery with html content

Question

Hi I am trying to create a variable in jquery that contains a table for outputting in different areas of a website. But it is giving me an error, and I do not understand why. Here is my JQUERY:

var copy = "<table width='750' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td>Tarifa valida desde:</td>
    <td>Tarifa valida hasta:</td>
    <td>Tarifa MXN</td>
    <td>Tarifa USD</td>
  </tr>
  <tr>
    <td><input type='text' name='from1' id='from1' class='date' /></td>
    <td><input type='text' name='to1' id='to1' class='date' /></td>
    <td><input type='text' name='mxn1' /></td>
    <td><input type='text' name='usd1' /></td>
  </tr>
  <tr>
    <td>Extra Pax MXN:</td>
    <td>Extra Pax USD:</td>
  </tr>
  <tr>
    <td><input type='text' name='exmxn1' /></td>
    <td><input type='text' name='exusd1' /></td>
  </tr>
</table>";
    });

How could I place this in a variable so that I can output in various divs as so:

$(".divExample").html(copy);

Thank you in advance for anyones help!

The answers below are correct, though I would suggest a different strategy altogether. One that uses less HTML inside your JS. — Jezen Thomas
– Jezen Thomas, Commented Sep 8, 2012 at 17:40

Adil · Accepted Answer · 2012-09-08 17:56:50Z

4

Syntax error due to wrongly assigned string.

concatenate the lines

var copy = "<table width='750' border='0' cellspacing='0' cellpadding='0'>" 
            + "<tr>";
  ....

edited Sep 8, 2012 at 17:56

answered Sep 8, 2012 at 17:39

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfsq · Accepted Answer · 2012-09-08 17:42:13Z

4

You could concatenate strings like it was suggested. Or another way is to escape new line characters with back slash:

var html = "<table> \
    <tr>....</tr> \
    </table>";

answered Sep 8, 2012 at 17:42

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

James Montagne · Accepted Answer · 2012-09-08 17:38:56Z

3

You haven't handled the line returns in your string. Because of this, javascript assumes that the end of each line is the end of a statement. Clearly each line is not a valid statement. Concatenate your string like so:

var "multi-"+
    "line "+
    "string";

answered Sep 8, 2012 at 17:38

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Comments

codingbiz · Accepted Answer · 2012-09-08 17:47:44Z

2

When I have complex html this is what I do. I put the html in an enclosing DIV and get the html content

var copy = $('#mycomplexhtml').html(); //gets the content I placed in an hidden div


<!-- I normally place this at the bottom-most part of the page -->
<div id="mycomplexhtml" style="display:none">
  <table width='750' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td>Tarifa valida desde:</td>
    <td>Tarifa valida hasta:</td>
    <td>Tarifa MXN</td>
    <td>Tarifa USD</td>
  </tr>
 ...
  </table>
</div>

answered Sep 8, 2012 at 17:47

codingbiz

26.4k9 gold badges62 silver badges99 bronze badges

1 Comment

twk Over a year ago

This is very clever. I have been using an html string approach, where basically I create a var html_str = <h1>My HTML</h1> and then add to it, line by line as, html_str += <p>This will show beneath my H1!</p>. However this takes a long time to write out, and isn't so easy to read later (even though I indent it to mimic the HTML formatting)..ugh...Going to give your method a go here, maybe some may frown on sticking hidden divs in the bottom of the HTML, but in some ways, maybe it's better than crammed into a JS file as a bunch of concatenated strings...Thanks for this clever idea..

zeemz · Accepted Answer · 2012-09-08 17:46:29Z

0

Or you can use this tool http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/

It works fine :)

answered Sep 8, 2012 at 17:46

zeemz

3754 silver badges17 bronze badges

Collectives™ on Stack Overflow

Create a variable in jquery with html content

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related