Javascript Reference - HTML DOM Ul Object

The Ul object represents an HTML <ul> element.

Ul Object Properties

Property	Description
compact	Not supported in HTML5. Use style.lineHeight instead. Sets and gets the line height for each items
type	Not supported in HTML5. Use style.listStyleType instead. Sets or gets the list item bullet type of an unordered list

Standard Properties and Events

The Ul object supports the standard properties and events.

Example

We can access a <ul> element by using getElementById().


<!DOCTYPE html>
<html>
<body>
<ul id="myUL">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul><!--from   www  . j  a  v  a2  s . com-->


<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myUL").id;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

We can create a <ul> element by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<!-- w w  w. j a va2s.c o m-->
<script>
function myFunction() {
    var x = document.createElement("UL");
    x.setAttribute("id", "myUL");
    document.body.appendChild(x);

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

</body>
</html>

The code above is rendered as follows: