JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="test">
<li class="haschild"><a href="#">One</a>
    <ul>
        <li>One Point One</li>
        <li>One Point Two</li>
    </ul>
</li>
<li><a href="#">Two</a></li>
<li class="haschild"><a href="#">Three</a>
    <ul>
        <li>Three Point One</li>
        <li>Three Point Two</li>
    </ul>
</li>
</ul>

CSS

ul {
    margin: 0 0 6px;
}
li {
    margin: 0 0 3px 6px;
}

JavaScript

$$("#test li.haschild").getElement("a").each(function (elem, idx) {
  new Element('span', {text: ' &raquo; '}).inject(elem);
});