Menu
I am struggling to find a clean solution to my problem and was wondering if anyone could offer some tips.
I have "templates.html" which contains a collection of HTML snippets which I want to load into JavaScript and use. What is a good way to access the templates/snippets bearing in mind that templates.html is not a loaded DOM document?
I was thinking about using document.open to create a DOM to access but I think this has issues on certain browsers.
816
The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads. The content inside <template> can be rendered later with a JavaScript. You can use the <template> tag if you have some HTML code you want to use over and over again, but not until you ask for it.
To load external HTML into a <div>, wrap your code inside the load() function. To load a page in div in jQuery, use the load() method.
Use jQuery and the .load() ( http://api.jquery.com/load/ ) method to inject the loaded document into the DOM.
$(function() { $('#content').load('/templates.html'); }); This is a bit old but since "Load HTML template with JavaScript" nowadays should refer to the loading of a HTMLTemplateElement here is a more modern looking approach to loading natives templates with javascript that also works for your use case.
First of all using <template> is already better than loading HTML into a hidden DIV because templates are innert and don't display content. You can have the templates being rendered from the beginning and use them whenever you need.
<html> <head> <template>My template</template> </head> <body> <script> document.body.append( document.importNode( document.querySelector('template').content, true ) ) </script> </body> </html> Or create them dynamically.
const template = document.createElement('template') // modify the template's content template.content.append(document.createElement('div')) // add it to the document so it is parsed and ready to be used document.head.append(template) Because we want the content of the template to be built based on some text we get from the network, we have to parse it and add it to our template.content.
const text = fetchTemplateSomehowAsText('my-template.html') const parsedDocument = new DOMParser().parseFromString(text, 'text/html') template.content.append(parsedDocument.querySelector('#my-snippet')) If my-template.html already comes wrapped in the <template> tag we can avoid the part of creating the template element manually because the DOMParser already creates the template element for us.
document.head.append( new DOMParser().parseFromString(text, 'text/html') .querySelector('template') ) ) This is a snippet I've been using to load templates into the document dynamically that uses what I just explained.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
