<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Yomitan Manual Performance Tests</title> <link rel="stylesheet" href="test-stylesheet.css"> </head> <body><div class="content"> <div class="description">Add elements</div> <div> <a href="#" id="add-elements-1000">1000</a> <a href="#" id="add-elements-10000">10000</a> <a href="#" id="add-elements-100000">100000</a> <a href="#" id="add-elements-1000000">1000000</a> <script> document.querySelector('#add-elements-1000').addEventListener('click', () => addElements(1000), false); document.querySelector('#add-elements-10000').addEventListener('click', () => addElements(10000), false); document.querySelector('#add-elements-100000').addEventListener('click', () => addElements(100000), false); document.querySelector('#add-elements-1000000').addEventListener('click', () => addElements(1000000), false); let counter = 0; function addElements(amount) { const container = document.querySelector('#container'); for (let i = 0; i < amount; i++) { const element = document.createElement('div'); element.textContent = 'ありがとう'; container.appendChild(element); } counter += amount; document.querySelector('#counter').textContent = counter; } </script> </div> <div id="counter"></div> <div id="container"></div> </div></body> </html>