HTML Metadata Elements
HTML
Metadata defines information that are needed for other elements in the document.
HTML Metadata elements
➔ Metadata content sets up the presentation or behavior of the rest of the content, or sets the relationship of the document to another document.
➔ Metadata defines information that are needed for other elements in the document.
Metadata elements are
<base>,
<link>,
<meta>,
<noscript>,
<script>,
<style>,
<template>,
<title>.
HTML <template> Tag
➔ The HTML <template> tag is used to specify HTML content that is not rendered when the page loads, but can be cloned and inserted into the DOM immediately at runtime using JavaScript.
➔ This is a blueprint for reusable content.
Example <template> Tag
<!DOCTYPE html>
<html>
<head>
<style>
ol li {
margin: 5px;
padding: 5px;
}
ol li span {
margin: 5px;
padding: 5px;
}
button {
margin: 5px;
padding: 5px 15px;
}
</style>
</head>
<body>
<h2>Item List</h2>
<button onclick="addItem(event)">Tomato</button>
<button onclick="addItem(event)">Potato</button>
<button onclick="addItem(event)">Carrot</button>
<button onclick="addItem(event)">Pumpkin</button>
<button onclick="addItem(event)">Lettuce</button><br>
<button onclick="addItem(event)">Eggplant</button>
<button onclick="addItem(event)">Cabbage</button>
<button onclick="addItem(event)">Cauliflower</button>
<button onclick="addItem(event)">Broccoli</button>
<h2>Cart Item List</h2>
<ol id="container-id">
</ol>
<template id="template-id">
<li>
<span>Item Name Placeholder</span>
<button class="remove">Remove</button>
</li>
</template>
<script>
let counter = 0;
function addItem(e) {
const template = document.getElementById('template-id');
const templateCopy = template.content.cloneNode(true);
//counter++;
let productName = e.target.textContent;
templateCopy.querySelector('span').textContent = productName;
templateCopy.querySelector('.remove').onclick = (event) => {
event.target.closest('li').remove();
};
document.getElementById('container-id').appendChild(templateCopy);
}
</script>
</body>
</html>
Copy code and click on the "Try it Now" button to see how it works.
Example <template> Tag
<!DOCTYPE html>
<html>
<head>
<style>
ol li {
margin: 5px;
padding: 5px;
}
ol li span {
margin: 5px;
padding: 5px;
}
.product {
width: 150px;
height: 220px;
padding: 10px;
margin: 10px;
font-size: 10pt;
line-height: 0.1;
border: 1px solid #f2f2f2;
text-align: center;
float: left;
}
button {
width: 120px;
margin: 15px 5px 5px 5px;
padding: 10px 5px;
}
.product button:hover {
background-color: #105060;
color:white;
}
.card {
clear: left;
}
</style>
</head>
<body>
<h2>Item List</h2>
<div class="product">
<img src="./resources/images/veg-tomato.png" width="100px" height="100px" />
<p>Tomato</p>
<p>Type:Vegitables</p>
<p>Price:$1.50/kg</p>
<button onclick="addItem(event)">Add to cart</button>
</div>
<div class="product">
<img src="./resources/images/veg-cabbage.png" width="100px" height="100px" />
<p>Cabbage</p>
<p>Type:Vegitables</p>
<p>Price:$1.50/kg</p>
<button onclick="addItem(event)">Add to cart</button>
</div>
<div class="product">
<img src="./resources/images/veg-bellpepper.png" width="100px" height="100px" />
<p>Bell Pepper</p>
<p>Type:Vegitables</p>
<p>Price:$1.50/kg</p>
<button onclick="addItem(event)">Add to cart</button>
</div>
<div class="product">
<img src="./resources/images/veg-lettuce.png" width="100px" height="100px" />
<p>Lettuce</p>
<p>Type:Vegitables</p>
<p>Price:$1.50/kg</p>
<button onclick="addItem(event)">Add to cart</button>
</div>
<h2 class="card">Cart Item List</h2>
<div class="card">
<ol id="container-id">
</ol>
</div>
<template id="template-id">
<li>
<span>Item Name Placeholder</span>
<button class="remove">Remove</button>
</li>
</template>
<script>
let counter = 0;
function addItem(e) {
const template = document.getElementById('template-id');
const templateCopy = template.content.cloneNode(true);
//counter++;
const parentNode = e.target.parentNode;
const scopedChild = parentNode.children[1];
let productName = scopedChild.textContent;
templateCopy.querySelector('span').textContent = productName;
templateCopy.querySelector('.remove').onclick = (event) => {
event.target.closest('li').remove();
};
document.getElementById('container-id').appendChild(templateCopy);
}
</script>
</body>
</html>
Copy code and click on the "Try it Now" button to see how it works.