如何使用jquery正确地附加许多div？

Question

我有这么长的html代码，当你使用旧浏览器时，提醒你：

<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标签都在新的一行上呢？

Answer 1

您需要在创建元素时添加每个元素，并使用.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");

Answer 2

要在JavaScript字符串中使用换行符，可以使用规范中称为LineContinuation的字符。只需在每个新行前面添加一个\字符：

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

这是一种将字符串分散到多行中的方法(例如，为了更容易进行代码编辑)，而不需要字符串实际包含任何新行字符。

这是做你想做的事情的最快方法。

然而，JSLint建议不要这样做。(我个人并不关心。)

您可以改为使用字符串连接：

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

或者，您甚至可以使用Array#join，将每个数组项写在新行上：

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

Answer 3

你可以这样写它

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

不过，老实说，我认为你最好把消息放在那里，但要隐藏起来。然后，您只需使其可见，而不是实际附加消息。