如何使用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

要在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(' '));