Slide 14.12: HTML DOM properties and methods (cont.)

HTML DOM Properties and Methods (Cont.)

The innerHTML Property
The easiest way to get or modify the content of an element is by using the innerHTML property. innerHTML is not a part of the W3C DOM specification. However, it is supported by all major browsers. The innerHTML property is useful for returning or replacing the content of HTML elements.

The innerHTML property can also be used to view the source of a page that has been dynamically modified. The code on the right gets the innerHTML (text) from the <p> element with id="intro":

The childNodes and nodeValue Properties
The properties childNodes and nodeValue can also be used to get the content of an element. In the example below, getElementById is a method, while childNodes and nodeValue are properties.

The code on the right gets the value of the <p> element with id="intro":

Demonstration
The following demonstration shows how the script of HTML and JavaScript is displayed on the Web.


<html> <head> <script type="text/javascript"> function rowRules( ) { document.getElementById('myTable').rules="rows"; } function colRules( ) { document.getElementById('myTable').rules="cols"; } </script> </head> <body> <table id="myTable" border="1"> <tr><td>Row1 cell1</td><td>Row1 cell2</td></tr> <tr><td>Row2 cell1</td><td>Row2 cell2</td></tr> <tr><td>Row3 cell1</td><td>Row3 cell2</td></tr> </table> <br /> <input type="button" onclick="rowRules( )" value="Show only row borders"> <input type="button" onclick="colRules( )" value="Show only col borders"> </body> </html>