Javascript 如何在jQuery中使用$（“body”）.append（）添加多个HTML代码？

我试图使用jQuery创建一个bookmarklet，但在使用$（“body”）.append（“”）在正文中附加多个HTML命令时遇到语法错误；有没有其他方法可以使用jQuery附加多个HTML命令

实际上，我制作这个书签是为了参考一个教程：

我甚至发送了bookmarklet的代码：

bookmarklet.js

（函数（）{
var v=“1.3.2”；
if（window.jQuery==未定义| | window.jQuery.fn.jQuery
启用iFrame。
#wikiframe_veil{显示：无；位置：固定；宽度：100%；高度：100%；顶部：0；左侧：0；背景色：rgba（255255,25）；光标：指针；z索引：900；}
#wikiframe_veil p{颜色：黑色；字体：普通粗体20px/20px Helvetica，无衬线；位置：绝对；顶部：50%；左侧：50%；宽度：10em；边距：-10px自动0-5em；文本对齐：中心；}
#wikiframe iframe{显示：无；位置：固定；顶部：10%；左侧：10%；宽度：80%；高度：80%；z索引：999；边框：10px实心rgba（0,0,0,5）；边距：-5px 0-5px；}
“”；//追加标记到此结束，但浏览器在追加多个HTML代码时显示语法错误
美元("维基框架"),法代因(750),；
}
}否则{
美元（“#wikiframe_-veil”）。淡出（750）；
$（“#wikiframe iframe”）.slideUp（500）；
setTimeout（“$（'#wikiframe'）.remove（）”，750）；
}
$（“#wikiframe_veil”）。单击（函数（事件）{
美元（“#wikiframe_-veil”）。淡出（750）；
$（“#wikiframe iframe”）.slideUp（500）；
setTimeout（“$（'#wikiframe'）.remove（）”，750）；
});
})();
}
})();

---

那么，有没有办法消除这个错误呢。我希望我的问题足够清楚。提前谢谢

也许您可以将HTML放在一行中（无cr中断），或者用“\”来转义它们，例如：

"<div id='wikiframe'><div id='wikiframe_veil' style=''><p>Loading...</p></div>"

“加载…
”

或者

”\
\
正在加载…
\
\
"

另一种方法是使用严重的重音符号（`）：

`
加载

`

不幸的是，当您在多行上有这样的文本字符串时，JavaScript会中断解析，您必须在同一行上打开和关闭引号。然而，解决这一问题的方法很少：

您应该将

.append（）

参数折叠到一行，并返回一个连续的HTML字符串，如下所示：

$("body").append("<div id='wikiframe'><div id='wikiframe_veil' style=''><p>Loading...</p></div></div>");

$("body").append("<div id='wikiframe'>" + 
                     "<div id='wikiframe_veil' style=''>" +
                          "<p>Loading...</p>" +
                     "</div>" +
                 "</div>");

$（“body”）。追加（加载…
）；

或者，如果希望使代码缩进以提高可读性，则可以将多行连接起来，并在每行末尾添加加号，如下所示：

$("body").append("<div id='wikiframe'><div id='wikiframe_veil' style=''><p>Loading...</p></div></div>");

$("body").append("<div id='wikiframe'>" + 
                     "<div id='wikiframe_veil' style=''>" +
                          "<p>Loading...</p>" +
                     "</div>" +
                 "</div>");

$（“body”）.append（“+
"" +
“正在加载…
”+
"" +
"");

我的建议（可能是最理想的方式，因为它看起来更干净）是用HTML行加载一个数组，然后用一个空的空格以这种方式再次加入数组：

var html = [
  '<div id="wikiframe">',
     '<div id="wikiframe_veil" style="">',
        '<p>Loading...</p>',
     '</div>',
  '</div>',
];

$("body").append(html.join(''));

var html=[
'',
'',
“加载…
”，
'',
'',
];
$（“body”）.append（html.join（“”））；

现在，您的代码是干净、可读的，页面上注入的HTML将是单行的，并且已经压缩

---

我已尝试在每行后面添加\但仍然出现错误！我试着用`（严肃的口音）替换“（双引号）删除了“\”，似乎也可以处理多行。试试看吧？在我的本地机器上也可以。在JSFIDLE上再次尝试，但可能块在那里出现了错误…下面是删除样式标记时的情况。严重强调是一种ES6模板方法，它可能适用于最新的浏览器，但在少数版本上可能会被破坏回来，我不建议使用它，直到每个浏览器都100%符合ES6标准Hanks@MacK。制作一个数组并加入它的概念实际上起了作用。谢谢你的时间。：@htoniv谢谢你编辑我的文章，让我的文章更好。谢谢你的帮助，因为我对堆栈交换非常陌生。：）

var html = [
  '<div id="wikiframe">',
     '<div id="wikiframe_veil" style="">',
        '<p>Loading...</p>',
     '</div>',
  '</div>',
];

$("body").append(html.join(''));