如何在 jQuery 中使用 $("body").append() 添加多个 HTML 代码？

Question

我正在尝试使用 jQuery 制作一个小书签，但在使用 $("body").append(" "); 在正文中附加多个 HTML 命令时遇到语法错误。有没有其他方法可以使用 jQuery 附加多个 HTML 命令？

实际上，我是参考教程制作这个书签的： https: //www.smashingmagazine.com/2010/05/make-your-own-bookmarklets-with-jquery/

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

小书签.js

(function () {

    var v = "1.3.2";

    if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
        var done = false;
        var script = document.createElement("script");
        script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
        script.onload = script.onreadystatechange = function () {
            if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
                done = true;
                initMyBookmarklet();
            }
        };
        document.getElementsByTagName("head")[0].appendChild(script);
    } else {
        initMyBookmarklet();
    }

    function initMyBookmarklet() {
        (window.myBookmarklet = function () {
            function getSelText() {
                var s = '';
                if (window.getSelection) {
                    s = window.getSelection();
                } else if (document.getSelection) {
                    s = document.getSelection();
                } else if (document.selection) {
                    s = document.selection.createRange().text;
                }
                return s;
            }
            if ($("#wikiframe").length == 0) {
                var s = "";
                s = getSelText();
                if (s == "") {
                    var s = prompt("Forget something?");
                }
                if ((s != "") && (s != null)) {
                    $("body").append("<div id='wikiframe'>
                                      <div id='wikiframe_veil' style=''>
                                      <p>Loading...</p>
                                      </div>
                                      <iframe src='http://en.wikipedia.org/w/index.php?&search=" + s + "' onload=" $('#wikiframe iframe').slideDown(500); ">Enable iFrames.</iframe>
                                    <style type='text/css'>
                                                    #wikiframe_veil { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,.25); cursor: pointer; z-index: 900; }
                                                    #wikiframe_veil p { color: black; font: normal normal bold 20px/20px Helvetica, sans-serif; position: absolute; top: 50%; left: 50%; width: 10em; margin: -10px auto 0 -5em; text-align: center; }
                                                    #wikiframe iframe { display: none; position: fixed; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 999; border: 10px solid rgba(0,0,0,.5); margin: -5px 0 0 -5px; }
                                    </style>
                                    </div> "); //the append tag ends here, but the browser is showing syntax error on appending multiple HTML codes
                    $("#wikiframe_veil").fadeIn(750);
                }
            } else {
                $("#wikiframe_veil").fadeOut(750);
                $("#wikiframe iframe").slideUp(500);
                setTimeout("$('#wikiframe').remove()", 750);
            }
            $("#wikiframe_veil").click(function (event) {
                $("#wikiframe_veil").fadeOut(750);
                $("#wikiframe iframe").slideUp(500);
                setTimeout("$('#wikiframe').remove()", 750);
            });
        })();
    }

})();

那么有什么办法可以消除这个错误呢。我希望我的问题足够清楚。提前致谢！

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/

2021 ES6+ 版本

更新答案，如果您的项目有一个适用于 ES6 的转译器，并且您可以使用模板字符串，您可以执行以下操作，这更加容易和干净：

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