Question

jQuery的一个好处是语法（例如链接时）允许您的脚本跨越多个换行符，以便于格式化和可读性。

当添加大量HTML时，是否存在等效/首选方法？

例如，做这样的事情会很好：

 $("#theObject")
    .doSomething()
    .append("
        <div>
             <div>
                  Hello World
             </div>
        </div>
    ")

这不起作用，但有什么类似的东西可以让你更容易阅读在jQuery脚本中格式化的HTML吗？

Answer 1

在每行的末尾添加\

$("#theObject").doSomething()
.append("
    <div>\
         <div>\
              Hello World\
         </div>\
    </div>\
")

编辑2016：

如果您使用的是ES6（ES2015），现在可以使用template literals。

Answer 2

 $("#theObject")
.doSomething()
.append(
    "<div>"
         +"<div>"
              +"Hello World"
         +"</div>"
    +"</div>"
);

最好将.append（）内容加载为var，如下所示：

var append_me =
     "<div>"
         +"<div>"
              +"Hello World"
         +"</div>"
    +"</div>";

$("#theObject").doSomething().append(append_me);

Answer 3

如果您正在使用jQuery，并且您的字符串文字将成为html元素，您也可以直接在页面上创建这些元素并隐藏它们，然后在DOM中引用这些元素而不是将它们输入为字符串。例如，您可以将其放在页面上：

<div id="myContent" style="display: none;">
    <div>
        <div>
            Hello World
        </div>
    </div>
</div>

然后像这样重写你的代码：

$("#theObject")
.doSomething()
.append(
    $('#myContent').html();
);

或者你可以附加实际的DOM元素本身，如果你只需要一次引用它，而不是每次都复制它的内容。

Answer 4

这可以更轻松完成！

请勿使用“+”或“/”。

使用模板文字：`

$("#theObject").doSomething()
.append(`
    <div>
         <div>
              Hello World
         </div>
    </div>
`)

可以找到有关模板文字的文档here。

正如@Geuis评论的那样，这只能在es2015 / ES6（Can I use template literals）中使用。

Answer 5

使用字符串在Javascript中表示不错的HTML树结构没有优雅的方法。你只需要使用一堆连接，这总是很难看，并且我可以补充说它执行得非常糟糕。这就是我的工作：

将我的标记写在我最喜欢的编辑器中，包含我想要的所有空白
将其保存在与JS文件相同的位置，并使用相同名称+“。txt”作为扩展名
我的编辑器已经使用RegEx进行查找和替换，因此我使用>[\s]*<
将单行结果复制到我的Javascript文件中作为字符串变量
撤消.txt文件中的替换

这当然意味着，每当您更改标记时，您都需要重新进行替换并将其复制。不过，我很快就养成了这个习惯。此外，jQuery将能够更快地处理这个问题，因为要解析的字符会更少。

Answer 6

var str  = '<div>';
str += '<div>';
str += 'Hello World';

$("#theObject")
    .doSomething()
    .append(str)

格式化应跨越多行的jQuery字符串

6 个答案: