- Mastering Angular Components
- Gion Kunz
- 211字
- 2021-07-23 17:23:38
Template elements
Template elements allow you to define regions within your HTML, which will not be rendered by the browser. You can then instantiate these document fragments with JavaScript and then place the resulting DOM within your document.
While the browser is actually parsing the template content, it only does so in order to validate the HTML. Any immediate actions that the parser would usually execute will not be taken. Within the content of template elements, images will not be loaded and scripts won't be executed. Only after a template is instantiated will the parser take the necessary actions, as follows:
<body>
<template id="template">
<h1>This is a template!</h1>
</template>
</body>
This simple HTML example of a template element won't display the heading on your page. As the heading is inside a template element, we first need to instantiate the template and add the resulting DOM into our document:
var template = document.querySelector('#template');
var instance = document.importNode(template.content, true);
document.body.appendChild(instance);
Using these three lines of JavaScript, we can instantiate the template and append it into our document.
- CorelDRAW X6 中文版圖形設(shè)計(jì)實(shí)戰(zhàn)從入門到精通
- 物聯(lián)網(wǎng)短距離無線通信技術(shù)應(yīng)用與開發(fā)
- 無人機(jī)通信
- Kong網(wǎng)關(guān):入門、實(shí)戰(zhàn)與進(jìn)階
- Bonita Open Solution 5.x Essentials
- 通信十年:擁抱互聯(lián)網(wǎng)
- 5G技術(shù)與標(biāo)準(zhǔn)
- 6G無線網(wǎng)絡(luò)空口關(guān)鍵技術(shù)
- 移動(dòng)物聯(lián)網(wǎng):商業(yè)模式+案例分析+應(yīng)用實(shí)戰(zhàn)
- 圖神經(jīng)網(wǎng)絡(luò)前沿
- 移動(dòng)互聯(lián)網(wǎng)環(huán)境下的核心網(wǎng)剖析及演進(jìn)
- 物聯(lián)網(wǎng),So Easy!
- 5G新型多址技術(shù)
- 網(wǎng)絡(luò)分析技術(shù)揭秘:原理、實(shí)踐與WinPcap深入解析
- 現(xiàn)場(chǎng)總線與工業(yè)以太網(wǎng)及其應(yīng)用技術(shù)(第2版)