jQuery script for using HTMLImport as HTML templates

import.js

/**
 * @author: Micha Wotton
 * @version: 0.1
 * 
 * To import an HTML file and inject it's content into a target container.
 * Uses an additional data attribute on the 'link' element to identify target element. 
 * Format link tags as follows:
 * <link type="import" href="path/to/import.html" dat-target="targetElementID">
 * 
 * You can also use further imports within imported files. This script will recursively inject them, 
 * including into target elements in the parent document.
 */

$(document).ready(function(){
    function importContent(links) {
        links.each(function(e){
            var target = $(this).data('target');
            if (typeof target != 'undefined'){
                var content = this.import;
                $("#"+target).html($(content.body).html());
                var childLinks = $(content).find("link[rel='import'");
                if (childLinks.length > 0){
                    importContent(childLinks);
                }
            }
        });
    }
    
    var links = $("link[rel='import'");
    importContent(links);
}