Javascript Jquery压缩语句而不丢失可读性

我该怎么做呢？有更好的办法吗

        // Add wrapper tags
        $(this).append('<div class="jC2_Outer">');
        $(this).append('<div class="jC2_Toolbar">');
        $(this).append('<a href="#">Copy</a>');
        $(this).append('<a href="#">Plain Text</a>');
        $(this).append('<a href="#">Link</a>');
        $(this).append('<a href="#">Help</a>');
        $(this).append('</div>');
        $(this).append('<div class="jC2_Container">rg');

//添加包装器标记
$（此）。附加（“”）；
$（此）。附加（“”）；
$（此）。附加（“”）；
$（此）。附加（“”）；
$（此）。附加（“”）；
$（此）。附加（“”）；
$（此）。附加（“”）；
$（this.append（'rg'）；

另外，append函数会关闭div，我应该如何将这些div添加到文档中，使它们不会关闭？在不起作用的时候这样做：

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

$（'.inner'）。追加（''）；

无论何时使用

append（）

，包含的HTML都必须有效（全部关闭）。您不能关闭稍后在另一个

append（）

行中打开的标记。否则，它们将为您关闭，因此您最终会：

$(this).append('<div class="jC2_Outer"></div>');
$(this).append('<div class="jC2_Toolbar"></div>');
$(this).append('<a href="#">Copy</a>');
$(this).append('<a href="#">Plain Text</a>');
$(this).append('<a href="#">Link</a>');
$(this).append('<a href="#">Help</a>');
//....

$（this.append（“”）；
$（此）。附加（“”）；
$（此）。附加（“”）；
$（此）。附加（“”）；
$（此）。附加（“”）；
$（此）。附加（“”）；
//....

为什么不在一个append（）调用中追加整个HTML块

$（this.append（'rg'）；

var mytext='1\
\
\
\
\
\
\
rg′；
$（this）.append（mytext）；

---

这提供了更好的优化，因为您不必每次都创建新的jquery对象，而且键入的次数也少很多；如果没有上下文，很难看出您正在尝试做什么。但这里有几个选择：

链接：

$(this).append('<div class="jC2_Outer">')
       .append('<div class="jC2_Toolbar">')
       .append('<a href="#">Copy</a>')
       .append('<a href="#">Plain Text</a>')
       .append('<a href="#">Link</a>')
       .append('<a href="#">Help</a>')
       .append('<div class="jC2_Container"></div>');

$（this）.append（“”）
.append（“”）
.append（“”）
.append（“”）
.append（“”）
.append（“”）
.附加（“”）；

串联：

$(this).append('<div class="jC2_Outer">\
                <div class="jC2_Toolbar">\
                <a href="#">Copy</a>\
                <a href="#">Plain Text</a>\
                <a href="#">Link</a>'\
                <a href="#">Help</a>\
                </div>\
                <div class="jC2_Container">');

$（this）.append（'\
\
\
\
'\
\
\
');

$（此）。附加(
''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+“rg”
);

您可以加入阵列

var content = [
'<div class="jC2_Outer">',
    '<div class="jC2_Toolbar">',
        '<a href="#">Copy</a>',
        '<a href="#">Plain Text</a>',
        '<a href="#">Link</a>',
        '<a href="#">Help</a>',
        '<div class="jC2_Container">rg</div>',
    '</div>',
 '</div>'
];

$(this).append(content.join(''));

var内容=[
'',
'',
'',
'',
'',
'',
"rg",，
'',
''
];
$（this.append（content.join（“”））；

他似乎不知道如何生成多行字符串，请看我的答案。@philwinkle，你的链接示例是一个糟糕的做法，正如Matt所说，如果没有反斜杠，你不能跨越多行。第二行行不通，你应该从第一个版本中删除

.append（“”）

，因为jQuery附加了元素，不是标签。嗯，在编辑的过程中，批评开始了——在将来会更加有意识。NICK-请给我一个链接不良的文档例子。practice@philwinkle，我应该澄清，一般意义上的连锁是一种良好的做法，因为在构建字符串时不知道如何跨越多行而进行链接是一种糟糕的做法。又名“创可贴”。小心使用字符串中的“\”将字符串包装成多行。即使“\”后面有一个空格，也会导致分析错误。

var mytext='<div class="jC2_Outer">\
        <div class="jC2_Toolbar">\
        <a href="#">Copy</a>\
        <a href="#">Plain Text</a>\
        <a href="#">Link</a>\
        <a href="#">Help</a>\
        </div>\
        <div class="jC2_Container">rg';
$(this).append(mytext);

$(this).append('<div class="jC2_Outer">')
       .append('<div class="jC2_Toolbar">')
       .append('<a href="#">Copy</a>')
       .append('<a href="#">Plain Text</a>')
       .append('<a href="#">Link</a>')
       .append('<a href="#">Help</a>')
       .append('<div class="jC2_Container"></div>');

$(this).append('<div class="jC2_Outer">\
                <div class="jC2_Toolbar">\
                <a href="#">Copy</a>\
                <a href="#">Plain Text</a>\
                <a href="#">Link</a>'\
                <a href="#">Help</a>\
                </div>\
                <div class="jC2_Container">');

$(this).append(
    '<div class="jC2_Outer">'
  + '<div class="jC2_Toolbar">'
  + '<a href="#">Copy</a>'
  + '<a href="#">Plain Text</a>'
  + '<a href="#">Link</a>'
  + '<a href="#">Help</a>'
  + '</div>'
  + '<div class="jC2_Container">rg'
);

var content = [
'<div class="jC2_Outer">',
    '<div class="jC2_Toolbar">',
        '<a href="#">Copy</a>',
        '<a href="#">Plain Text</a>',
        '<a href="#">Link</a>',
        '<a href="#">Help</a>',
        '<div class="jC2_Container">rg</div>',
    '</div>',
 '</div>'
];

$(this).append(content.join(''));