Substituting HTML imports in Jquery

Question

I have the following code that uses an HTML import:

<script>
        function onImport() {
            $('#templates-container').append($(document.querySelector('link[rel="import"]').import).find("script"));
        }
</script>

<link rel="import" href="templates/templates.html" onload="onImport(event)" >

But HTML imports have been deprecated, as this warning indicates:

[Deprecation] HTML Imports is deprecated and will be removed in M80, around February 2020. Please use ES modules instead. See https://www.chromestatus.com/features/5144752345317376 and https://developers.google.com/web/updates/2019/07/web-components-time-to-upgrade for more details.

There doesn't seem to be a clean way to replace this kind of HTML import. I tried

<object type="text/html" data="templates/templates.html" onload="onImport(event)"></object>

but I get the following error:

indexTool.html:100 Uncaught TypeError: Cannot read property 'import' of null
    at onImport (indexTool.html:100)
    at HTMLObjectElement.onload (indexTool.html:108)

where the line 100 is

$('#templates-container').append($(document.querySelector('link[rel="import"]').import).find("script"));

and the line 108 is

<object type="text/html" data="templates/templates.html" onload="onImport(event)"></object>

I assume the problem is the 'link[rel="import"]' part. What can I substitute it with?

I am using Jquery 1.11.2.