In javascript/html, how can I get a part of an external website (such as a div) and set it onto mine?

Question

I'm trying to make a google chrome extension using javascript/html. Currently, I'm simply trying to make a page that has a div exactly the same as another website's div. So for example in Google Translate, for the following link: http://translate.google.com/ , there is a div: <div id="gog"> ... </div> and in my html page, I have a div: name="output"> ...imitate "gog" div in here... </div>. How can I copy all the contents of "gog" into "output" using javascript. Is this not possible? Any example would be great!

Note that I'm not making this for Google translate so accessing their api isn't a viable option.

Thanks.

Answer 1

You could have a look at jQuery's load() function: http://api.jquery.com/load/

As you can see there

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

would load the content of #container on 'ajax/test.html' into #result on the current page.

Answer 2

Get the two divs in the shape of dom objects ( here ) and then use the innerHtml to move the innards of gog to the innards of output. Does that answer your question?