Page 332 - Webapplication11_C11_Flipbook
P. 332

<!DOCTYPE html>
              <html >

              <head>
                  <title>DOM Interaction Example</title>
              </head>

              <body>
                  <h1 id="title">Hello, World!</h1>
                  <button id="changeText">Change Text</button>

                  <button id="addDiv">Add Div</button>
                  <div id="container"></div>
                  <script>

                      // Change text content
                      document.getElementById('changeText').addEventListener('click', function()
              {
                          document.getElementById('title').textContent = Hello Touchpad';
                      });

                      // Add a new div
                      document.getElementById('addDiv').addEventListener('click', function() {
                          const newDiv = document.createElement('div');

                          newDiv.textContent = 'I am a new div!';
                          document.getElementById('container').appendChild(newDiv);
                      });
                  </script>

              </body>
              </html>














              When you click on the Change Text button the text of the web page changes from Hello, World! To Hello Touchpad.
















                330     Touchpad Web Applications-XI
   327   328   329   330   331   332   333   334   335   336   337