Question

我的代码有一个标题。我想修改除标题之外的整个页面。我需要使用 html（）而不是追加/前置等等。

代码如下所示：

<body>
    <div class="header">
        HEADER
    </div>
    <!-- MODIFY THIS -->
</body>

我试过这个但没有运气$("body .header:after").html("TEST");

有可能吗？

PS：不要添加任何div。我只想在标题类之后选择和修改整个内容。

JSfiddle

Answer 1

你可以这样做。获取标题中的内容，然后使用它来填充整个正文标记。

jQuery(document).ready(function() {
 
  var content = jQuery(".header").text();
  jQuery("body").html("<div class='header'>"+content+"</div>" + 'modified content');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="header">
    HEADER
  </div>
  Some random content
</body>

Answer 2

你不能在jQuery中使用:after，你的问题是如果你没有选择标题，实际上没有任何东西可以选择 - 整个文档是body标签，后面是标题。

如果无法选择，则无法使用html()。

您需要添加至少一个div，或将标题作为身体html()的一部分插入：

$("div:not(.header)").html("Body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="header">
        HEADER
    </div>
    <div><!-- MODIFY THIS --></div>
</body>

或者您可以使用append()因为设计来完成此操作：

$("body").append("<div>Body</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="header">
        HEADER
    </div>
    <!-- MODIFY THIS -->
</body>

Answer 3

我的解决方案：

$("body").html(document.getElementsByClassName("header")[0].outerHTML + "TEST");

希望这可以提供帮助。

Answer 4

.html()用新元素替换所有元素。所以你可以尝试jQuery insertAfter方法。

＆＃13;

$( "<p>Your HTML Code Here</p>" ).insertAfter( ".header" );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="header">
        HEADER
    </div>
    <!-- MODIFY THIS -->
</body>

＆＃13;

JQuery修改div后的body内容

4 个答案: