Вы можете сделать что-то вроде этого.
<body>
<a href="http://google.com">Click me</a>
<div id="dynamic-content"></div>
<script id="template" type="text/html">
<h1>Hello</h1>
<p>This is a template</p>
</script>
<script>
document.addEventListener('click', function (e) {
var target = e.target;
if (target.tagName == 'A') {
e.preventDefault();
document.getElementById('dynamic-content').innerHTML = document.getElementById('template').innerHTML;
}
}, false);
</script>
</body>
Он перехватывает все события щелчка и предотвращает поведение по умолчанию.Затем он берет содержимое из шаблона, который хранится внутри тега сценария с типом «text / html», и внедряет его в DOM.Все браузеры будут игнорировать теги сценария с чем-либо, кроме «text / javascript», поэтому безопасно скрывать содержимое шаблона таким образом.Я не делаю ничего динамического с шаблоном здесь, но если вы хотите сделать это, вы можете использовать что-то вроде MicroTemplate Джона Резига, как он описывает здесь: http://ejohn.org/blog/javascript-micro-templating/. При использовании чего-то вроде MicroTemplate, вы хотитеобъединяйте содержимое шаблона с динамическими данными перед тем, как вставлять его в DOM.
Еще один хороший вариант шаблонов - официальный шаблон jQuery (в соавторстве с Microsoft): http://api.jquery.com/category/plugins/templates/