slide 49
Copyright © 2005 W3C (MIT, ERCIM, Keio)
Don't forget your scripting
Separating content & presentation
function makeList () {
var headings = document.getElementsByTagName( 'h2' );
var div = document.createElement( 'div' );
div.setAttribute( ' id ' , 'testList' );
var title = div.appendChild(document.createElement( 'div' ));
title.appendChild(document.createTextNode( 'Tests on this page:' ));
for (i=0;i<headings.length;i++) {
var test = div.appendChild(document.createElement( 'p' ));
body = document.getElementsByTagName( 'body' )[0];
body.insertBefore( div, body.firstChild );
div # testList {
float: right;
width: 20%;
padding: 1em;
border: 1px solid teal;
background-color: #FFCC99;
font-size: 90%;
margin: 1em;
color: #996633;
div # testList div {
font-weight: bold;
see also: Dom Scripting, Jeremy Keith
Go to previous slide Go to next slide Go to the first slide Go to the slide index Go to the PDF version
Slide 49 of 76
This version of the same function shows a much better approach. We assign an id attribute to the box, then move all the styling information to a CSS file, referencing the markup via the id. This makes the code much cleaner and makes it easier to manage the styling.
Again, this technique is recommended as a standard best practice in Jeremy Keith's book Dom Scripting (which contains many other useful ideas along similar lines). It is another good example of how good web design benefits localization.