CODEWITHSUNDEEP
jqueryhtmlajax
Lorenzo
Lorenzo

Reputation: 447

jQuery: get the HTML inside a certain tag

I have this HTML page, and I want to create a jQuery method that gathers the HTML content of another page.

For instance, I want to get the HTML content between the tags, including child tags, attributes, text..

I've come up with something like:

<script>
var page;
$(document).ready(function() {

$.ajax({
       type : "GET",
    url : "template.html",
    dataType : "html",
    success : function(html) {
    page = $(html).find('body').html();
            //do something

                }
            });
        });

    </script>

but it doesn't do the trick. any idea? thank you.

Upvotes: 0

Views: 1237

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

The problem is that jQuery does not parse entire html pages as string..

When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, we use the browser's .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as <html>, <title>, or <head> elements. As a result, the elements inserted may not be representative of the original string passed.

So you need to bypass this limitation..

a work-around is to manually add the returned html to an html element.

success  : function(html){    
            var ndoc = document.createElement('html');
            ndoc.innerHTML = html;
            page = $('body', ndoc);
            console.log(page);
            }

Upvotes: 0

Mathieu
Mathieu

Reputation: 3093

You could use the JQuery Load-function.

$('#result').load('ajax/test.html #container');

This function loads the html from the div with id container from the page ajax/test.html and puts the html into the div with id result.

source: http://api.jquery.com/load/

Upvotes: 4

Related Questions