I'm having trouble applying a stylesheet to content I'm generating
after the fact.
Here's the sample code:
<html>
<head>
<title>CSS/DOM Problem Example</title>
<style type="text/css">
..historylinks {
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline }
}
</style>
<script type="text/javascript">
function writeToHistory () {
var hlist = document.getElementById("historyList");
var li = document.createElement('li');
var a = document.createElement('a');
a.appendChild(document.createTextNode('Test!'));
a.setAttribute("onClick", "alert(\"Alert!\");");
a.setAttribute("class", "historylinks");
li.appendChild(a);
hlist.insertBefore(li,hlist.firstChild);
}
</script>
</head>
<body>
<p>When you click this button, a new link appears at the top of the
history list.
Click on one of these links to perform an action.</p>
<button onClick="writeToHistory();">Test</button>
<ul id="historyList">
<li>End of History</li>
</ul>
</body>
</html>
Mozilla reports that it doesn't understand the "a" declaration, and
that might be a part of it, but as far as I can tell it's valid CSS. I
tried assigning the style with both a.className and a.setAttribute;
both generate valid HTML, but neither takes.
(After /that/ I need to figure out why IE6 won't popup the Alert
box...)
I appreciate any help you offer.
