Javascript Reference - HTML DOM Ol Object

The Ol object represents the <ol> element.

Ol Object Properties

Property	Description
compact	Not supported in HTML5. Use style.lineHeight instead. Sets or gets the line height for each list item
reversed	Sets or gets whether the list uses the reversed order bullet
start	Sets or gets the start attribute
type	Sets or gets the type attribute

Standard Properties and Events

The Ol object supports the standard properties and events.

Example

We can access an <ol> element by using getElementById().


<!DOCTYPE html>
<html>
<body>
<ol id="myOl">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol><!--  w  w  w  .j a v a2  s .  c om-->
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    var x = document.getElementById("myOl");
    x.start = "5";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

We can create an <ol> element by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<!-- www.  j  av  a 2  s. c o m-->
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.createElement("OL");
    x.setAttribute("id", "myOl");
    document.body.appendChild(x);

    var y = document.createElement("LI");
    var t = document.createTextNode("A");
    y.appendChild(t);
    document.getElementById("myOl").appendChild(y);
}
</script>

</body>
</html>

The code above is rendered as follows: