X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

Javascript with DOM

Javascript works with DOM

Javascript can modify the DOM (change HTML elements)

Here is an example how to change the content of the HTML element.

<!DOCTYPE html>
<html>
   <body>
       <h1>Javascript learning</h1>
   
       <button type="button" onclick="changeContent()">Click Me!</button>
       <p id="element">This is a demonstration.</p>
       <script>
           function changeContent() { 
               document.getElementById("element").innerHTML = "DOM changed";
           }
       </script>
   </body>
</html>

Using the getElementById(...) function you can make modification in your HTML element .

Using it,you can

  • Change HTML element
  • Delete HTML element
  • Create HTML element
  • Copy HTML element
  • etc...

Javascript with css

Javascript lets you work with css using getElementById(...) function .

  • Create styles
  • Change styles
  • Delete styles
  • Add css classes
  • Remove css classes
  • etc...

Here is a simple example

<!DOCTYPE html>
<html>
  <body>
    <h1>Javascript with CSS</h1>
    <p id="element">JavaScript changes styles</p>

    <script>
         function changeStyles() {
               var x = document.getElementById("element");
               x.style.fontSize = "25px";           
               x.style.color = "red"; 
         }
    </script>
    <button type="button" onclick="changeStyles()">Change Styles!</button>
  </body>
</html>



Do you find this helpful?

Related articles