如何使用jquery正確追加多個div？

我有這麼長的HTML代碼，警報，當你有舊的瀏覽器：如何使用jquery正確追加多個div？

<div class="ie-message" style="display: block; "> 
     <div class="alert error"> 
     <h2> 
      Sorry, your web-browser is outdated 
     </h2> 
     <p> 
      We recommend you install new version of web-browser 
     </p> 
     </div> 
     <div class="browsers-list"> 
     <div class="browser-button chrome"> 
      <a href="http://www.google.com/chrome">Google Chrome</a> 
     </div> 
     <div class="browser-button firefox"> 
      <a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a> 
     </div> 
     <div class="browser-button opera"> 
      <a href="http://www.opera.com/download/">Opera</a> 
     </div> 
     <div class="browser-button safari"> 
      <a href="http://www.apple.com/safari/download/">Apple Safari</a> 
     </div> 
     <div class="browser-button ie"> 
      <a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx">Internet Explorer</a> 
     </div> 
     </div><div class=?"ie-message" style=?"display:? block;? ">?<div class="ie-message" style="display: block; "> 
     <div class="alert error"> 
     <h2> 
      Sorry, your web-browser is outdated 
     </h2> 
     <p> 
      We recommend you install new version of web-browser 
     </p> 
     </div> 
     <div class="browsers-list"> 
     <div class="browser-button chrome"> 
      <a href="http://www.google.com/chrome">Google Chrome</a> 
     </div> 
     <div class="browser-button firefox"> 
      <a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a> 
     </div> 
     <div class="browser-button opera"> 
      <a href="http://www.opera.com/download/">Opera</a> 
     </div> 
     <div class="browser-button safari"> 
      <a href="http://www.apple.com/safari/download/">Apple Safari</a> 
     </div> 
     <div class="browser-button ie"> 
      <a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx">Internet Explorer</a> 
     </div> 
     </div>

我如何使用jQuery將其追加？當我寫這一切都在一個字符串，我得到了我需要

$('body').append('<div class="ie-message" style="display: block; "><div class="alert error"><h2>Sorry, your web-browser is outdated</h2><p>We recommend you install new version of web-browser</p></div><div class="browsers-list"><div class="browser-button chrome"><a href="http://www.google.com/chrome">Google Chrome</a></div><div class="browser-button firefox"><a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a></div><div class="browser-button opera"><a href="http://www.opera.com/download/">Opera</a></div><div class="browser-button safari"><a href="http://www.apple.com/safari/download/">Apple Safari</a></div><div class="browser-button ie"><a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx">Internet Explorer</a></div></div><div class="close-text">close</div></div>');

，但如何讓每一個HTML標記將在新的生產線？

來源

2012-02-13 byCoder

您需要在創建它時添加每個元素，並使用.attr() （例如，

var div = document.createElement("div"); 
$(div).attr("class", "ie-message"); 
$.('body').append(div); 

var subDiv = document.createElement("div"); 
$(subDiv).attr("class", "browser-list"); 
$.(div).append(subDiv);

等

但如果設置類的屬性，你應該使用.addClass()當設置的CSS屬性，你是最好的使用.css()例如中

$(div).addClass("ie-message");

和

$(div).css("display", block");

來源

2012-02-13 13:05:30

如果瀏覽器足夠好，您可以將此文本作爲頁面的默認（靜態）內容，然後用真實內容覆蓋它？

來源

2012-02-13 13:03:13

沒有！這是點頭好，我的工作是寫這個不在頁面 – byCoder 2012-02-13 13:05:12

您可以將HTML放入單獨的頁面並通過AJAX調用它。就像這樣：

if (oldBrowser) { 
    $(".ie-message").load("/path/to.html").show(); 
}

顯然，oldBrowser是一個變量，它的瀏覽器嗅探的結果。

來源

2012-02-13 13:04:51

你可以把它寫這樣

jQuery('#selector').append('<div class="ie-message" style="display: block;">' + 
    '<div class="alert-error">' + 
     '<h2>' + 
     … 
     '</h2>' + 
    '</div>' + 
'</div>');

老實說，雖然，我認爲你最好有消息已經存在，但隱藏的。然後你只能看到它而不是實際追加消息。

來源

2012-02-13 13:06:04 Mike

不，我的工作者說要做我喜歡的寫作 – byCoder 2012-02-13 13:07:39

謝謝，這很好 – byCoder 2012-02-13 13:21:56

要在JavaScript字符串中使用換行符，您可以使用spec指向的內容爲LineContinuation。只是在前面加上一個\字符每個新行：

這是一種方式來傳播串多行（爲了便於代碼編輯，例如），而字符串實際上包括任何新行字符。

這是做你想做的最快的方法。

但是，JSLint建議不要這樣做。（我個人不在乎。）

你可以使用字符串連接來代替：

$('body').append('<div>' + 
    ' <p>foo</p>' + 
    '</div>');

或者你甚至可以使用Array#join，新上一條線寫每個數組項：

$('body').append([ 
    '<div>', 
    ' <p>foo</p>', 
    '</div>' 
].join(' '));

來源

2012-02-13 13:07:42

您可以使用您的字符串時\n使用javascript在\n上創建一個換行符。如果要在查看的頁面中創建換行符，請使用<br />

來源

2012-02-13 13:07:56

只是使該div隱藏。

<div class="ie-message" style="display: hidden; ">

和d，當你想警告稱此爲：

$(".ie-message").dialog({modal:true});

來源

2012-02-13 13:11:52 Yorgo

如何使用jquery正確追加多個div？

回答

相關問題