如何在$ jQuery中使用$（「body」）。append（）添加多個HTML代碼？

Question

我正在嘗試使用jQuery製作小書籤，但在使用$（「body」）在正文中附加多個HTML命令時出現語法錯誤。append（「」）;有沒有其他方法可以使用jQuery追加多個HTML命令？

其實，我正在這個書籤參考教程：https://www.smashingmagazine.com/2010/05/make-your-own-bookmarklets-with-jquery/

，我甚至在發送代碼爲書籤：

bookmarklet.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

不幸的是，當您在多個lin上有文本字符串時，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>" 

另一種方法，使用該墓重音符號（`）：

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