JQuery modify body content after div

Question

I have my code which have a header. I want to modify the whole page except the header. I need to use html() and not append/prepend/etc.

Code looks like this:

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

I have tried this but no luck $("body .header:after").html("TEST");

Is it possible ?

PS: Dont add any div. I just want to select and modify whole content after the header class.

JSfiddle

You can't use `:after` in jQuery http://stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery — Pranav C Balan, Jun 22 '16 at 07:04
@PranavCBalan my question is different. Take a look of it. If it's duplicate, then how can I capture the content after specific div? — Jacob, Jun 22 '16 at 07:07
[demo](https://jsfiddle.net/b3cdujdk/) check the demo if this the intended output\ — guradio, Jun 22 '16 at 07:08

Sooraj · Answer 1 · 2016-06-22T07:18:42.767

You can do something like this. Get the content in the header , and then use it to populate entire body tag.

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>

Cobus Kruger · Answer 2 · 2016-06-22T07:22:38.640

0

You cannot use :after in jQuery and your problem is that there isn't actually anything to select if you don't select the header - your entire document is the body tag, followed by the header.

If there is nothing to select, there is nothing to use html() on.

You will need to add at least one div, or insert the header as part of your html() for the body:

$("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>

Or you could just use append() because it was designed to do exactly this:

$("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>

edited Jun 22 '16 at 07:22

answered Jun 22 '16 at 07:13

Cobus Kruger

8,338
3
61
106

Thanks but i badly need to use html() – Jacob Jun 22 '16 at 07:16
I saw that in your initial post, but I don't understand why. The point is that there is nothing to select if that is your entire document. You can only append, or add an extra element to use the `html()` on. – Cobus Kruger Jun 22 '16 at 07:18
I updated the answer to show how simple it becomes once you add the extra div. – Cobus Kruger Jun 22 '16 at 07:24

score 0 · Answer 3 · answered Jun 22 '16 at 07:30

0

My solution:

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

Hope this can help.

answered Jun 22 '16 at 07:30

Trung Le Nguyen Nhat

636
6
9

score 0 · Answer 4 · edited Jun 22 '16 at 08:09

0

.html() is replace all element with new element.So you can try jQuery insertAfter method.

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

<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>

edited Jun 22 '16 at 08:09

Jack jdeoel

4,554
5
26
52

answered Jun 22 '16 at 07:54

Allan Empalmado

943
1
6
12

JQuery modify body content after div

4 Answers4