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

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),那么现在可以使用模板文字.

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>
`)

模板文字的文档可以在这里找到。

正如@Geuis所说，只能在es2015 / ES6中使用（我可以使用模板文字）。