https://developer.mozilla.org/es/docs/Web/HTML/Elemento/templatephp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/templatehtml
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5html5
https://developer.mozilla.org/en-US/docs/Web/CSS/@importnode
https://www.html5rocks.com/en/tutorials/webcomponents/template/
https://www.html5rocks.com/zh/tutorials/webcomponents/template/web
"use strict"; /** * * @author xgqfrms * @license MIT * @copyright xgqfrms * @description HTML5 Template * @augments * @example * */ /* <template> <h2>Flower</h2> <img src="https://www.w3schools.com/tags/img_white_flower.jpg"> </template> <template> <div class="myClass">I like: </div> </template> */ const showContent = () => { // let temp = document.getElementsByTagName("template")[0], let temp = document.querySelector(`[data-tempalte="tempalte-img"]`), clone = temp.content.cloneNode(true); document.body.appendChild(clone); }; const templateGenerator = (datas = [], debug = false) => { let result = ``; // let temp = document.getElementsByTagName("template")[1], let temp = document.querySelector(`[data-tempalte="tempalte-links"]`), item = temp.content.querySelector("div"); for (let i = 0; i < datas.length; i++) { let a = document.importNode(item, true); a.textContent += datas[i]; document.body.appendChild(a); } return result; }; const arr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"]; if (document.createElement("template").content) { console.log("YES! The browser supports the template element"); templateGenerator(arr); setTimeout(() => { showContent(); }, 0); } else { console.error("No! The browser does not support the template element"); }
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/tags/tag_template.aspapp
The <template>
tag holds its content hidden from the client.ide
Content inside a <template>
tag will not be rendered.post
The content can be visible and rendered later by using JavaScript
.ui
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_template2debug
<button onclick="showContent()">Show template</button> <template> <h2>Flower</h2> <img src="https://www.w3schools.com/tags/img_white_flower.jpg" width="214" height="204"> </template>
const showContent = () => { let temp = document.getElementsByTagName("template")[0], clone = temp.content.cloneNode(true); document.body.appendChild(clone); };
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_template3
https://www.w3schools.com/html/html5_serversentevents.asp
EventSource
Check
Server-Sent Events
Support
Create a new EventSource
object, and specify the URL of the page sending the updates
if(typeof(EventSource) !== "undefined") { // Yes! Server-sent events support! var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + "<br>"; }; } else { // Sorry! No server-sent events support.. }
text/event-stream
Server-Side Code Example
For the example above to work, you need a server capable of sending data updates
(like PHP or ASP).
The server-side event stream syntax is simple. Set the "Content-Type"
header to "text/event-stream"
. Now you can start sending event streams.
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse
"use strict"; /** * * @author xgqfrms * @license MIT * @copyright xgqfrms * @description HTML5 Template * @augments * @example * */ /* <template> <h2>Flower</h2> <img src="https://www.w3schools.com/tags/img_white_flower.jpg"> </template> <template> <div class="myClass">I like: </div> </template> */ const showContent = () => { // let temp = document.querySelector(`[data-tempalte="tempalte-img"]`); let temp = document.getElementsByTagName("template")[0], clone = temp.content.cloneNode(true); document.body.appendChild(clone); }; const templateGenerator = (datas = [], debug = false) => { let result = ``; // do something... //get the template element: let temp = document.getElementsByTagName("template")[1]; // let temp = document.querySelector(`[data-tempalte="tempalte-links"]`); //get the DIV element from the template: let item = temp.content.querySelector("div"); //for each item in the array: for (let i = 0; i < datas.length; i++) { //Create a new node, based on the template: let a = document.importNode(item, true); //Add data from the array: a.textContent += datas[i]; //append the new node wherever you like: document.body.appendChild(a); } return result; }; const arr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"]; if (document.createElement("template").content) { console.log("YES! The browser supports the template element"); templateGenerator(arr); setTimeout(() => { showContent(); }, 0); } else { console.error("No! The browser does not support the template element"); }
https://www.mockplus.com/blog/post/free-responsive-html5-web-design-templates