Ajax dynamically loading HTML modules

In the development of Web page work, we will often encounter a thing, multiple pages of one or several parts are the same, how to reuse these parts to save development time, in the asp,jsp development has the concept of reference modules, now we use AJAX to implement the module reference, see a piece of HTML code

We can wrap the public part with a custom label that is not in HTML and then, when the page's document is loaded, traverse the custom tab, access the corresponding module via the custom tag's address property, and replace itself, we can modify the HTML structure to the following
Then the JS code, in order to facilitate my direct use of the jquery library
$ (function () {    var tpllist = $ ("TPL");    for (var i = 0; i < tpllist.length; i++) {        var TPL = $ (tpllist[i]);        var src = tpl.attr ("src");        (function (TPL) {            $.get (src, function (data) {                tpl.replacewith (data);            });        }) (TPL);}    );
The closure is used here to protect the variables, the knowledge of closures in the park has a lot of explanation, here do not repeat.
　
Ajax dynamically loading HTML modules