[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).

pseudo:
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
http://mattwarden.com


This email proudly and graciously contributes to entropy.



More information about the thelist mailing list