How to copy web page content using innerHTML

Ciprian on Tuesday, May 17, 2022 in JavaScript DOM

NEW! Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

I need to extract some data from a web page and place it on a fishing site. The source web page is updated frequently, and I don’t have the necessary time to update it. So, I’ll use the JavaScript innerHTML function.

First, I should identify the element I’m trying to copy, let’s say a div with the #info ID:

<div id="info">
    This information updates daily.
</div>

The next step is to include the source web page as an iframe with width and height equal to 0:

<iframe name="thief" width="0" height="0" frameborder="0" src="source.html"></iframe>

The final code should read from the IFRAME and display the content on the destination page, in a specially created div element:

<div id="destination">
    This content will be replaced.
</div>
<script>
// This script will copy the ontent of the 'info' div into the 'thief' div in the destination page
parent.document.all('thief').innerHTML = document.all('info').innerHTML;
</script>

Related posts

Leave a Reply

You have to agree to the comment policy.