Document-write to a specific place
after page load

[The embed technique described on this page is not presented as an alternative to existing modern techniques. Let's just say it's easy and blazing fast.]

Document.write and inner-/outerHTML
Both inner-/outerHTML and document.write offer an easy way to embed content from an external file (to your host/domain). The advantage of document.write over inner-/outerHTML is that document.write does not only import external HTML (or text), but also the JS and CSS contained in the external file.

Cons of document.write
Unfortunately, document.write can only be used while the page in which it is used is still loading. And it only executes where encountered: it cannot inject at a given node point. Also: document.write blocks elements below it from rendering until it has finished running.

Dealing with the cons of document.write
There's a way to deal with these issues. We can indeed inject the result of document.write at any specific part of our page - even after the page has finished loading - by applying a mixture of document.write and inner-/outerHTML. The idea is to first document-write the contents of the external file(s) (that we want to embed) to an invisible div just before the closing body tag (while the page is still loading; the document.write section won't block elements below it from rendering, since there's nothing below it), and then to use inner-/outerHTML for copying the invisible div's contents to a div of our choice after page load (via a click event, for example). That div will now contain all HTML/text and code present in the external files that were invisibly written to our page. Click on demo 1 for the details. Click on demo 2 to see that code present in an external file is preserved after embed.

Pushing a portion only of document-written content to a specific place
Pushing a portion only of an external file (that has been invisibly document-written to our page) to a specific place is simple. All we have to do is to wrap that portion of the external file in a div which we give a given ID, for example: portion_of_external1, and then, in the 'receiving' page, write something like:
<a onclick="copy_docwritten('some_div','portion_of_external1')">copy part of external1.html to some_div</a>
<div id="some_div" ></div>
In this case, we don't reference the div for the invisibly document-written external file itself (here: external1, see demo 1), but a div inside the external file. DEMO: first paragraph of demo 2 above.

Styling the divs where the external content is copied
Styling the divs where the external content is pushed (copied) can be done by replacing the lines for copying document-written content to a specific place - which have the following general form:
<a onclick="copy_docwritten('some_div','bla')">copy bla to some_div</a>
<div id="some_div" ></div>

with lines like:
<a onclick="copy_docwritten('some_div','bla'); document.getElementById('some_div').style.border='1px solid red' ">copy bla to some_div</a>
<div id="some_div" ></div>

<a onclick="copy_docwritten('some_div','bla'); document.getElementById('some_div').style.padding='5px' ">copy bla to some_div</a>
<div id="some_div" ></div>

When you want to use less simple CSS, you are better of with lines like:
<a onclick="copy_docwritten('some_div','bla'); document.getElementById('some_div').className='your_class' ">copy bla to some_div</a>
<div id="some_div" ></div>

where you will have specified your_class in a style sheet or in an inline style block. Of course, when you empty the div, you will have to make sure that all styles you've given to it will be erased (since an empty div shouldn't have styles). If you use the close button provided by function copy_docwritten for emptying a div (see demo 1), the script will automatically take care of this.


Arie Molendijk,