<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>X5 CORE</title> <style type="text/css"> body { font-size: 16px } p { font-weight: bold } span { color: red } p span { display: none } img { width: 100%; max-width: 300px } </style> <script> function a_click() { var span = document.getElementsByTagName('span')[0]; span.textContent = 'Web performance'; // change DOM text content, lead to relayout span.style.color = 'green'; // change CSSOM property } </script> </head> <body> <p>Hello <span>web performance</span> students!</p> <div><img src="X5.jpg" onclick="a_click()"></div> <script> var span = document.getElementsByTagName('span')[0]; span.textContent = 'interactive'; // change DOM text content span.style.display = 'inline'; // change CSSOM property // create a new element, style it, and append it to the DOM var div = document.createElement('div'); div.textContent = '*** Add new element to DOM ***'; div.style.color = 'blue'; document.body.appendChild(div); </script> </body> </html>