1. берете любой клиентский шаблонизатор
2. выводите пререндер
<ul id="list">
<?php foreach ($items as $item): ?>
<li><?= $item->name ?>
<?php endforeach; ?>
</ul>
3. добавляете шаблон
<script id="my-template" type="text/x-whatever">
<li>{{:name}}</li>
</script>
4. оживляете (псевдокод, детали см в реализации конкретного шаблонизатора)
$('.add').on('click',function() {
var html = $('#my-template').render({id: 1, name: 'test'});
$('#list').append(html);
}
Некое дублирование разметки всё же остается, но оно всё в одном месте, поэтому проблем особых не вызывает.