Append Dynamic content to html template using Jquery

If we want to append the dynamic content to html template using jquery below will be the simple solution

	<!DOCTYPE html>

	<html>
	<head>
	<title>Modular Design Pattern</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
	<div>TODO write content


	<input type="button" name="button" value="buttonclick" id="buttonclick"/>
	<div id="target"></div>
	</div>
	</body>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

	<script>
	$(document).ready(function () {


	//Clone the template
	var template = $('#hidden-template').html();

	$('#buttonclick').click(function () {
	//Clone the template
	var item = $(template).clone();

	//Find the
	$(item).find('.first').html("First");

	//Change 'bar' to '-Bar'
	$(item).find('#bar').html("-Bar");

	//Append to the source
	$('#target').append(item);
	});
	});
	</script>


	<script id="hidden-template" type="text/x-custom-template">
	<tr>
	<td class="first">Foo</td>
	<td id="bar">Bar</td>
	<tr>
	</script>


	</html>

view raw index.html hosted with ❤ by GitHub

Lamp MAK