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

Answer 2

你可以像这样写

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

老实说，我觉得你最好不要把信息留在那里但是隐藏起来。然后你只能使它可见而不是实际附加消息。

Answer 3

您需要在创建元素时附加每个元素，并使用.attr()设置属性 e.g。

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 4

如果将此文本设为页面的默认（静态）内容，然后在浏览器足够好的情况下使用真实内容覆盖它，该怎么样？

Answer 5

您可以将HTML放入单独的页面并通过AJAX调用它。像这样：

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

显然，oldBrowser是一个变量，它是浏览器嗅探的结果。

Answer 6

使用javascript在\n上创建换行符时，您可以在字符串中使用\n。如果要在查看的页面中创建换行符，请使用<br />

Answer 7

只是隐藏这个div。

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

当你想要提醒时，请拨打电话：

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

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

7 个答案: