1.) Using document.getElementById()

• It is used to access an HTML element using its id.

• It returns the element object.

Example:

<p id="msg">Hello</p> 

<script> 
document.getElementById("msg"); // selects <p> 
</script>

2.) Using document.getElementById().value

 Used For:

• Getting or setting the value of form fields such as:

  • <input>

  • <textarea>

  • <select>

Example – Get Value:

<input id="num1" type="text">

<script>

let x = document.getElementById("num1").value;

console.log(x);

</script>

Example – Set Value:

document.getElementById("num1").value = "Hello";

3.) Using document.getElementById().innerHTML

 Used For:

• Getting or setting the HTML content inside an element like:

  • <p>

  • <div>

  • <h1>

  • <span>

  • any non-input tag

Example – Get Value:

<p id="demo">Welcome</p>
 <script> 
let x = document.getElementById("demo").innerHTML;
console.log(x); // Welcome
 </script>

Example – Set Value:

document.getElementById("demo").innerHTML = "Hello Students!";

Note - .value() is only works with form controls (input,select,textarea) for setting and getting value , where as innerHTML works Get/set HTML content inside element (p, div, h1, span, etc).