Начало
Тагове
История
Home
HTML тагове
template
Редактор на живо
HTML таг
template
редактор на живо
HTML код:
<button id="addUser" class="btn btn-sm btn-primary mb-3">Добави потребител</button> <ul id="userList" class="list-group mb-3"></ul> <template id="userItemTemplate"> <li class="list-group-item d-flex justify-content-between align-items-center"> <span class="user-name">Име на потребител</span> <span class="badge bg-secondary rounded-pill user-role">Роля</span> </li> </template> <script> const btn = document.getElementById('addUser'); const list = document.getElementById('userList'); const template = document.getElementById('userItemTemplate'); let counter = 1; btn.addEventListener('click', () => { const clone = template.content.cloneNode(true); clone.querySelector('.user-name').textContent = 'Потребител ' + counter; clone.querySelector('.user-role').textContent = counter % 2 === 0 ? 'Admin' : 'User'; list.appendChild(clone); counter++; }); </script>
Резултат: