[thelist] Separate text node from containing element using JS?

Matt Warden mwarden at gmail.com
Mon Mar 12 12:12:47 CDT 2007

On 3/12/07, Barney Carroll <barney at textmatters.com> wrote:
> Calling people with an understanding of DOM:
> I've been scratching my head with this little dilemma. I want to create
> OLs with numeric markers that are a different colour from the LI content.
> CSS doesn't cater for list marker color properties, there is only LI to
> define at best. A simple solution would involve something like this:
> <ol>
> <li><span>Preface</span></li>
> <li><span>Introduction</span></li>
> <li><span>Chapter 1</span></li>
> </ol>
> li{color:red;}
> li span{color:black;}
> ...However I am writing this for a very simple CMS and inserting the
> spans and making sure the text is in them is beyond my means. Use of
> list-style-image and adjacent selectors is also out because my user base
> is on IE (as ever).

I would suggest using JS to insert the spans. Some might say this is
inappropriate use of JS, but I think it's better than trying to do the
styling in JS (here you would just be modifying the structure, and CSS
would be defining the style).

lists = getelementsbyclassname('whatever') // available in many
utility libraries, e.g. YUI
for each list in lists {
    listitems = list.getElementsByTagName('li');
    for each li in listitems {
        copy text
        delete text node
        create span
        create text node with copied text
        append span to li

Matt Warden
Cleveland, OH, USA

This email proudly and graciously contributes to entropy.

More information about the thelist mailing list