使用 html 内容在 jquery 中创建变量答案

【问题标题】：Create a variable in jquery with html content使用 html 内容在 jquery 中创建变量
【发布时间】：2012-09-02 05:11:58
【问题描述】：

您好，我正在尝试在 jquery 中创建一个变量，其中包含一个用于在网站不同区域输出的表。但这给了我一个错误，我不明白为什么。这是我的 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>";
    });

我怎么能把它放在一个变量中，这样我就可以像这样在各种 div 中输出：

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

提前感谢您的帮助！

【问题讨论】：

下面的答案是正确的，尽管我会建议完全不同的策略。一种在 JS 中使用较少 HTML 的方法。
标题应该是“创建多行变量”

标签： jquery html var

【解决方案1】：

由于错误分配的字符串导致语法错误。

连接线

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

【讨论】：

【解决方案2】：

当我有复杂的 html 时，这就是我所做的。我将 html 放在一个封闭的 DIV 中并获取 html 内容

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>

【讨论】：

这很聪明。我一直在使用 html 字符串方法，基本上我创建了一个var html_str = <h1>My HTML</h1>，然后逐行添加到它，html_str += <p>This will show beneath my H1!</p>。然而，这需要 很长时间 才能写出来，而且以后也不太容易阅读（尽管我缩进它是为了模仿 HTML 格式）..ugh...打算给你的方法一个去这里，也许有些人可能不赞成在 HTML 底部粘贴隐藏的 div，但在某些方面，也许它比将一堆串联的字符串塞进 JS 文件中更好......感谢这个聪明的想法..跨度>

【解决方案3】：

或者你可以使用这个工具http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/

效果很好:)

【讨论】：

【解决方案4】：

您可以像建议的那样连接字符串。或者另一种方法是用反斜杠转义换行符：

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

【讨论】：

【解决方案5】：

您尚未处理字符串中的换行符。因此，javascript 假定每行的结尾是语句的结尾。显然，每一行都不是有效的陈述。像这样连接你的字符串：

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

【讨论】：