In HTML
- Create parent div
<!--------------- Parent div -------------->
<div id="parent" class="card m-5 mx-auto" >
<h1>Hello Template</h1>
</div>
- Create template:
<!----------------- Template tag ------------>
<template id="template">
<div class="card d-flex">
<img id="temp-img" src="https://picsum.photos/id/293/100/100" alt="smth">
<h1>Template title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, architecto dolor eius fugiat incidunt ipsa iure iusto officiis recusandae rerum!</p>
</div>
</template>
In CSS:
#parent{
width: 43%;
}
.card {
width:500px;
padding: 20px;
}
.card h1{
font-size: 50px;
}
#temp-img {
margin: 0 auto;
width: 400px;
height: 300px;
}
In Javascript:
- Call from HTML
const parent = document.querySelector('#parent');
const template = document.querySelector('#template');
- Clone the template
clonedTemplate = template.content.cloneNode(true);
- Append the new cloned template to the parent
parent.prepend(clonedTemplate);
Source link
lol