Home/ Questions/Q 6214543
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T06:53:49+00:00

HTML: <html> <head> <title></title> </head> <body> <div class=mainContainer> dgdhgdhgd <div class=header></div> <div class=navigation></div> <div

  • 0

HTML:

 <html> 
     <head>
         <title></title> 
     </head>
     <body>
         <div class="mainContainer"> dgdhgdhgd 
             <div class="header"></div>
             <div class="navigation"></div>
             <div class="content"></div>
             <div class="footer"></div>
         </div>
     </body>
 </html>

jQuery:

 <script type="text/javascript">

         $(function() {
             alert("hsahdjkha");
             $('#form1').append('<span id="result" ></span>');

             $('#result').load('sageframetemplating/layout.html', function() {
                 alert('Load was performed.');
                 $('#result').find('body').html();
                 alert($('#result').html());
                 test();
             });

         });

         function test() {
             $.ajax({
                 type: "POST",
                 url: "Default.aspx/Result",
                 data: "{ result:'" + $('#result').html() + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function(response) {
                     alert("Wa hooooooooo");
                 },
                 error: function() {
                     alert("error");
                 }
             });
         }

     </script>

I want to catch only body part of the HTML but I get:

<title></title> 
<div class="mainContainer"> dgdhgdhgd 
    <div class="header"></div>
    <div class="navigation"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

How it possible to catch only body part?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is you are trying to insert a block of HTML containing a <body> and a <head> tag into the page.

    Since you can’t have multiple <body> tags within the page, they get stripped out, leaving you with the output you see.

    One possible solution is to use $.get() instead — which doesn’t dump the data straight into the page — and parse the data before putting it into the page.

    $.get('sageframetemplating/layout.html', function(data) {
    var parsedData = $(data).find("body").html();
    $("#result").html(parsedData);
});

    I’ll admit I wrote this without any testing on my end, so you may have to clean up the syntax yourself.

    EDIT

    From html() docs:

    This method is not available on XML documents.

    Terrific.

    The data object is really a Document object, which has a method getElementsByTagName() which allows us to hack around with it and get our hands on a NodeList. If we then access the first item in the list, we get a Node:

    var node = data.getElementsByTagName("body")[0]

    At this point we can extract the results:

    $("#result").append($(node).children())

    This dirty, dirty hack will get you what you want for this very specific scenario.

    Note can do horrible things if your page contains scripts.

    • 0