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>'
);