We have been using HTML template in multiple JavaScript libraries. But in case you are not using any libraries and want to create template in JavaScript then you need to use script tag to implement it.
Let say you need to display some HTML content as below
We can use the
The following JavaScript generate dynamic design on HTML.
Below is the full code.
Good day :)
Let say you need to display some HTML content as below
<div style="border:1px solid grey; padding:10px;width:200px;">
<h1>Hello World</h1>
This is test template.
</div>
We can use the
<script type="text/template"></script> technique to implement templating client-side.<script id="hello" type="text/template"> <div style="border:1px solid grey; padding:10px;width:200px;"> <h1>Hello World</h1> This is test template. </div> </script>
The following JavaScript generate dynamic design on HTML.
<script>
var design = document.getElementById("placeholder");
var temp = document.getElementById("hello");
design.innerHTML = temp.innerHTML;
</script>
Below is the full code.
<html>
<body>
<div id="placeholder"></div>
</body>
<script id="hello" type="text/template">
<div style="border:1px solid grey; padding:10px;width:200px;">
<h1>Hello World</h1>
This is test template.
</div>
</script>
<script>
var design = document.getElementById("placeholder");
var temp = document.getElementById("hello");
design.innerHTML = temp.innerHTML;
</script>
</html>
Good day :)
0 Comments