Question

我正在执行DOM操作，需要插入相当大的HTML块，并且想知道除了连接还是混乱的代码之外是否有更好的方法。采用下面相当简单的代码：

<div id="mydiv">
 <img src="image1.jpg" />
 <a href="page1.html" onclick="myfunction('test');">Here's My Link</a>
</div>

我知道在页面中插入HTML的两种方法 - 都需要手动转义单引号：

连接字符串

$('#mydiv').after(  //html, innerHtml, insertAfter, etc. can be used here
    '<div id="mydiv">' +
    '<img src="image1.jpg" />' +
    '<a href="page1.html" onclick="myfunction(\'test\');">Here\'s My Link</a>'+
    '</div>'
);

删除换行符

$('#mydiv').after('<div id="mydiv"><img src="image1.jpg" /><a href="page1.html" onclick="myfunction(\'test\');">Here\'s My Link</a></div>');

我的代码示例非常简短，但很容易看到，当您获得超过10行或必须转义的代码或JavaScript调用时，这两个进程都不能很好地扩展。从工作流程的角度来看，编写/测试代码然后手动将其转换为上述方法之一是非常耗时的。此外，在未来的日期调试或添加代码在这个混乱的混乱中变得非常困难 - 换行版本几乎不可读。

所有这些JS / jQuery增强功能 - 是否真的没有办法有效地考虑多行字符串？那些必须在相当常规的基础上做这件事的人如何处理这个？如果在JS中无法完成某些工作，是否有一些在线工具可以将代码转换为（包括转义字符）这些选项之一（有点像JS minifiers的作用）？

由于

Answer 1

-----更新：-----

截至2014年5月，我们推出了新的HTML代码<template>，并在桌面版Chrome和桌面上支持Chrome，Firefox和Opera。在MDN上查看此标记的状态。 <template>标记是新Web Components之一。用例可能包括Shadow DOM

<强> --------------------

正如你所写，这两个是可能的，但非常混乱。另一种常见方法是简单地将HTML包含在<script type="text/template" id="template-id">标记下的HTML页面中。浏览器不会将其识别为javascript，因此您只需将HTML放入其中即可。然后用简单的document.getElementById('template-id').innerHTML在JS中检索你的模板，瞧！您也可以在内部使用隐藏的div或输入（虽然这不常见）。

许多JS库解决了您要解决的问题，即客户端HTML模板（在您的情况下是非常小的模板）。在您的情况下，我认为简单的<script type="text/template">应该足够了，但对于更高级的模板库，您可以查看Handlebars.js，Mustache JS，甚至是dust.js

服务器端JS与例如。 NodeJS或客户端AJAX请求允许外部“HTML部分”文件。

Answer 2

我多次遇到这个问题。不仅是多线，而且是创造元素的极端丑陋。它使代码难以忍受..

我不确定这是一个答案，但你至少可以做的是尽可能将正常逻辑与'GUI逻辑'分开。

另一种可能性是使用＆amp; 而不是插入单引号并缩进html'字符串'，如下所示：

var afterhtml   =    '<div id="mydiv">'
                +        '<img src="image1.jpg" alt="image 1" />'
                +        '<a href="page1.html" onclick="myfunction(&apos;test&apos;)">'
                +            ' Here\'s my Link!'
                +        '</a>'
                +    '</div>'
                ;


$('#mydiv').after(afterhtml);

这将使代码更加清晰。

你可以看到缩进，里面是什么部分。
将您要注入的html与实际语句分开也可以明确（但它会产生额外的变量，但是......）

如果您使用Node.JS，您还可以使用渲染器（如Jade，http://jade-lang.com/），它可以轻松渲染大块而不会出现丑陋。

插入大块HTML而不进行修改

2 个答案: