logo标签列表

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

jqueryhtml
3

我有一段非常长的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标签都在新行上呢？

7个回答
5

要在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(' '));
2
您需要在创建元素时附加每个元素，并使用 .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()，例如：

etc.

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

并且

$(div).css("display", block");
2
您可以像这样编写：

您可以这样写

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

老实说，我认为最好将消息预先放置在那里，但隐藏起来。这样，您只需使其可见，而不是实际添加消息。
0
您可以将 HTML 放在单独的页面中，并通过 AJAX 调用它。像这样：
if (oldBrowser) {
    $(".ie-message").load("/path/to.html").show();
}

显然，oldBrowser是一个变量，它是通过浏览器嗅探得出的结果。
0

只需将此 div 隐藏即可。

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

当你想要弹出警告时，请调用以下代码：

  $(".ie-message").dialog({modal:true});
0
你可以将这段文本作为页面的默认（静态）内容，然后如果浏览器够好，就使用真正的内容覆盖它。
0

在使用 JavaScript 创建新行时，您可以在字符串中使用 \n。如果您想在查看的页面中创建新行，则使用 <br />

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接