store the content of an html-file into an jquery array

Question

hy erveryone,

I try to store the content of an HTML-File into an array-element with the help of jquery.

If I try:

$(document).ready(

        function(){

            html = $.parseHTML( '<p>say hello</p><p>or not</p><h3>just naother TAG</h3>' );


            alert(html[0].innerHTML);
            alert(html[1].innerHTML);
            alert(html[2].innerHTML);

    });

everything is fine.

But if I replace the String in the Brackets of parseHTML into an html-file like shown

$(document).ready(

        function(){

            html = $.parseHTML( 'navi.html' );


            alert(html[0].innerHTML);
            alert(html[1].innerHTML);
            alert(html[2].innerHTML);

});

the alert-box tells me "undefined".

The content of the navi.html-File is

<p>say hello</p><p>or not</p><h3>just another TAG</h3>

Could you please help me?

I already read similiar examples but I couldn't reach the goal.

thanks, Thorsten

Answer 1

jQuery's $.parseHTML does not get files, it parses HTML from strings, and that's it.

If you wanted to get the file, you'd have to use ajax, for instance $.get

$.get('navi.html', function(data) {
    console.log( data );
}, 'html');

Adding the dataType at the end invokes $.parseHTML automagically, and parses the returned data