Loading files into divs having a custom src attribute

The HTML src attribute supports frame, iframe, img, input and script elements. It does not support the div element. But HTML 5 gives us the "data" attribute that lets us define custom attributes. We can create whatever we want: <div data-brand=..., <div data-mymusic=... etc. So we can also have <div data-src=...

We can retrieve the value of the "data-" attributes by using getAttribute() and then use the output in all sorts of javascript operations. I found that we can use javascript (jquery) to load a file into a div by just applying $("#some_div").load(document.getElementById('some_div').getAttribute("data-src")) to something like <div id="some_div" data-src="some_file.html"></div>. The result will be a div that loads some_file.html.

I developed this a little bit further and created a script for loading files into divs having data-src=... and an obligatory (!!!) ID. (The custom attribute is not required if we load a file into a div using the click event, see below: usage). The script must be put after all the divs. It's best to put it immediately before the closing body tag:
function load_into_div(which_div, which_filename)
/* onload event: if the div has the attribute 'data-src' specifying a file name, load the file into the div (=which_div) */

/* other event (click, normally): load the file represented by 'which_filename' into the div, whether or not the div has the attribute 'data-src' */

/* do the onload for every div having the custom attribute data-src */
$('[data-src]').each(function() {load_into_div($(this).attr('id'));});

It's a jquery-based script, so we must put the following line in the head:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>


Demos (reset all here):
See divs below.
Try this link to load another file into the first div below.
Try this link to load a file into
this div
, which has not loaded anything yet because it doesn't have the attribute data-src=...

© Arie Molendijk, mesdomaines.nu