Automate Figure Numbers, Captions, and Lists

Part 1: The Basics

Roland Toy.
Need to move, add, or delete a numbered figure in a web document? No problem. This script ratchets figure numbers up or down to accommodate those changes.
A useful feature of word processing programs is the automatic assignment of sequential numbers to figures. But when writing for the web, every figure has to be manually numbered. Tedious. And if a figure, God forbid, is inserted, deleted, or reordered, every figure downstream of the change has to be manually recoded. Time-consuming and error inviting, especially when a document has numerous numbered figures.
This script manipulates the DOM to eliminate those headaches.
Roland Toy.
And because you acted now, you qualify for a bonus script that automatically lists the figures in their proper order! Heretofore another repetitive and irksome process. These two writer aids require no extra work outside of the normal insertion of images. Just paste some lines of code in the head of your document, and you’re done.
The figure numbers increment or decrement automatically however the figures are styled or moved around. In this demonstration, the figures are floated right, floated left, centered, stacked, with and without borders. These presentations are meant solely to evoke the rich inner world of Roland Toy, and are accomplished with simple css and class attribute declarations in <img> or <div> tags, which are standard parts of markup. They do not affect the autonumbering function.

Roland Toy.
Roland Toy.

Roland Toy.

Roland Toy.

Roland Toy.

To make these scripts functional, paste the following code into the head of your document, and in the text, place the figure images inside <div></div> tags. That’s it.

<script type="text/javascript">

function autoFigureNumber() {
var n="1"
m = document.getElementsByTagName('img');
	for (i = 0; i < m.length; i++) {
	var t = m[i].getAttribute('title');
	var nd = document.createElement('div');
	var dt = document.title;
	var s = document.doc.section.value;
	nd.appendChild(document.createTextNode("Figure  "  + n++ +". " + t ));
	m[i].parentNode.appendChild(nd);
	}
}
	
function listFigures() {
	var n="1";
	var f=document.getElementsByTagName("img");
	for (i = 0; i < f.length; i++) {
	var t=f[i].getAttribute('title');
	var x=t + "<br />";
	(document.write("Figure " + n++ + ". " + x));
	}
} 
</script> 
To generate a list of the figures in your document insert the following code where you want ther list to appear.
<script type="text/javascript">listFigures()</script> 
The following list was generated using the line of code above.