bookmarklet.js

Question

我正在尝试使用jQuery创建一个bookmarklet，但是我在使用$（“body”）在正文中附加多个HTML命令时会出现语法错误。append（“”）;有没有其他方法可以使用jQuery追加多个HTML命令？

实际上，我正在参考教程grep

制作这个Bookmarklet

我甚至发送了书签的代码：

bookmarklet.js

{{1}}

有没有办法摆脱这个错误。我希望我的问题很清楚。提前谢谢！

Answer 1

不幸的是，当您在多行上有文本字符串时，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>");

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

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

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

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

https://jsfiddle.net/e2bt47c0/

Answer 2

也许你可以将HTML放在一行（没有cr中断）或用'\'转义它们，例如：

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

，或者

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

另一种方法，使用Grave重音符号（`）：

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

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

bookmarklet.js

2 个答案: