PNLdev
Tutorial
Front-end
HTML
reference
CSS
reference
JavaScript
reference
En
English
فارسی
En
English
فارسی
Tutorial
Front-end
HTML
reference
CSS
reference
JavaScript
reference
Run
<!DOCTYPE html> <html> <head> <title>User List Example</title> </head> <body> <template id="userTemplate"> <div class="user"> <h2 class="username"></h2> <p class="email"></p> </div> </template> <script> var users = [ { username: 'username : ali_heydari', email: 'heydari@gmail.com' }, { username: 'username : ali_akbri', email: 'akbri@gmail.com' }, { username: 'username : ali_mahmodi', email: 'mahmodi@gmail.com' } ]; var userTemplate = document.getElementById('userTemplate'); var userContainer = document.createElement('div'); users.forEach(function(user) { var clone = document.importNode(userTemplate.content, true); clone.querySelector('.username').textContent = user.username; clone.querySelector('.email').textContent = user.email; userContainer.appendChild(clone); }); document.body.appendChild(userContainer); </script> </body> </html>
