HTML Templates - Pktasks.com Your Source for Crypto News and Job Opportunities"

Post Top Ad

HTML Templates

html-templates, html templates,html,free html templates,template,templates,html email template,make websites with html templates,html (programming language),ebay template,email template,html templates free,html template,django html templates,html template flask,editing html templates,best free html templates,html templates download,ebay html template,free html template,html ebay template,editing free html templates

A common task is to use Javascript (and AJAX) to append new table row, table cell, list item, select option, fieldset legend. To accomplish this task exists two main approaches.
  1. Using hidden container:
    This method place the template's content into a hidden container. The main pitfall of this way is that the browser fetch resources from the template, even the image (in case below) is have not been used yet.
    <div style="display: none">
    <img src="https://static.zinoui.com/img/logo.png">
    </div>
  2. Using script tag:
    This approach use .innerHTML to inject the template content into the DOM. It would lead to possible XSS attacks.
    <script type="text/template">
    <img src="https://static.zinoui.com/img/logo.png">
    </script>
That's the place where the native <template> could help.

NATIVE TEMPLATES TO THE RESCUE

A method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents. Part of the Web Components' set of standards.
where to define?
The <template> element can be placed into <head>, <body>, <frameset> and <colgroup>
what to contain?
  • Metadata content - base, link, meta, noscript, script, style, template, title
  • Flow content - Most elements that are used in the body of documents and applications are categorized as flow content: a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr, text
  • Any valid HTML content that is permitted to occur within the ol, ul, dl, figure, ruby, object, video, audio, table, colgroup, thead, tbody, tfoot, tr, fieldset, select
Actually the template's content is not part of DOM until is used, e.g. styles will not apply, scripts will not run, HTML will not render, images will not download.

USING TEMPLATES

In order to use a template, first you need to clone it, then insert it into the DOM.
  • HTML Markup
<template>
<li>
<a href=""></a>
</li>
</template>

<ul></ul>
  • Javascript
// Clone the fragment
var template = document.querySelector('template');
var item = document.importNode(template.content, true);
// Change the fragment
var a = item.querySelector('a');
a
.textContent = 'Test link';
a
.href = 'https://www.example.com';
// Insert the fragment into the DOM
document
.querySelector('ul').appendChild(item);

BROWSER SUPPORT

Chrome 26+, Firefox 22+, Safari 7.1+, Opera 15+. For old browsers try polyfills like this JSFiddle.

CONCLUSION

The new HTML5 template element looks very promising and has a bright future since it solves the problems with current template approaches. Our working demo demonstrates use of template tag with live example.

No comments:

Post a Comment

Post Top Ad