is it possible to read contents of a div from another html using jquery?

Question

im trying to read the contents of myDiv which resides in a separate html file and do some appending in the current page,is this possible? i know there is load(), but it displays the whole html as it is.

$( ".myDiv" ).each(function(){

//do stuff

});

i have tried $('#result').load('ajax/test.html #container') route, but it loads the contents from #container in to the div with id #result.i want to read the contents of the div with id #container from ajax/test.html,make some changes then display it in the div with id #result... im trying to use the each function on a div that resides on another page,hope im making some sense

Answer 1

.load() can also load page fragments. Example call from the docs:

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

would just load the div with the id #container out of the test.html file, into the div with the id #result.

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

update

To load & modify the content you need the underlaying .ajax() method, like

$.ajax({
   url:      'yourfile.html',
   type:     'GET',
   dataType: 'html',
   success:  function(data){
        var $content = $(data).find('.myDIV');
        if($content.length){
           $content.find('p').text('modified');

           $('#some_local_id').append($content);
        }
   }
});

Answer 2

You can use load on a non displayed element.

something like this (untested, although I did something like this once)

var a = document.createElement("div");
$(a).load("otherpage.html");

Then you can do whatever you want to the loaded html.