Javascript 中的 HTML 字符串换行符

Question

我正在尝试使用 jQuery 输出 html。

$('body').append('
<div>
  <div>
    <div></div>
  </div>
</div>
');

我想以这种方式缩进代码以获得更高的可读性。 它适用于 php 但不适用于 JS，有什么想法吗？我使用notepad++作为编辑器。

Answer 1

您应该为此使用模板系统。无论您使用多少缩进，如果您混合使用大量 HTML 和 Javascript，您最终都会得到意大利面条式代码。

HTML

<script type="text/template" id="my-template">
    <div>
        <div>
            <div></div>
        </div>
    </div>
</script>

Javascript

$('body').append($('#my-template').html());

如果您需要对模板渲染进行更多控制，则需要使用库。我推荐 underscore.js，它不是最好的 JavaScript 模板引擎，但它非常轻量级，并且附带一组很棒的辅助函数。

Answer 2

$('body').append('\n\
<div>\n\
  <div>\n\
    <div></div>\n\
  </div>\n\
</div>\n\
');

• \n 是在字符串中插入换行符（因此它将在 body 元素中输出）
• 最后的 \ 是 Javascript 的行继续符，因此您可以保持 JS 代码缩进，而不必在任何地方添加 + ''。

Answer 3

尝试这样的事情：

$('body').append('\
<div>\
  <div>\
    <div>foo</div>\
  </div>\
</div>');

Answer 4

您是否尝试过使用 Javascript 字符串文字？ “\n”是换行符，“\t”是制表符。

Answer 5

如果您想缩进，我建议您在代码中添加新行时使用串联运算符“+”：

$('body').append(
'<div>' +
  '<div>' +
    '<div></div>' +
  '</div>' +
'</div>'
);