Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM li value Property
  • Difficulty Level : Basic
  • Last Updated : 16 Apr, 2019

The DOM Li value Property is used to set or return the value of the value attribute of a list item. The value attribute is used to set the value for the list items and the other list item will be increment form that numeric value.
The value may be a number and alphabetical.

Syntax:

  • Return the value property.
    liObject.value
  • It is used to set the value property.
    liObject.value = number

Property Value: It contains a value i.e number which specify the value of the list item.

Return Value: It returns a numeric value which represents the value of the list item.

Example-1: This Example returns a value Property.






<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM li value Property
  </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
      DOM Li value Property 
  </h2>
    <ol>
        <!-- Assigning id to 'li tag' -->
        <li id="GFG" 
            value="100">
          Geeks
      </li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ol>
    <button onclick="myGeeks()">
      Submit
  </button>
    <p id="sudo"
       style="font-size:25px;
              color:green;">
  </p>
    <script>
        function myGeeks() {
            // Accessing 'li' tag. 
            var g = 
                document.getElementById("GFG").value;
            document.getElementById(
              "sudo").innerHTML = g;
        }
    </script>
</body>
  
</html>

Output:
Before Clicking On Button:

After Clicking On Button:

Example-2: This Example sets the value Property.




<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM li value Property
  </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
      DOM Li value Property
  </h2>
    <ol>
        <!-- Assigning id to 'li tag' -->
        <li id="GFG"
            value="100">
          Geeks
      </li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ol>
    <button onclick="myGeeks()">
      Submit
  </button>
    <p id="sudo" 
       style="font-size:25px;
              color:green;">
  </p>
    <script>
        function myGeeks() {
            // Accessing 'li' tag. 
            var g = 
                document.getElementById(
                  "GFG").value = "200";
            
            document.getElementById(
              "sudo").innerHTML = 
              "The value was change form 100 to " + g;
        }
    </script>
</body>
  
</html>

Output:
Before Clicking On Button:

After Clicking On Button:

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :