Javascript 嵌套ULs包装

我得到了一个HTML字符串，需要在Flash中使用它进行解析，方法是将嵌套的UL标记包装成一个跨度，并根据嵌套级别增加左边距值

之前：

之后：

注意递增的值：0，30，60

---

我做了一个令人讨厌的ActionScript解决方案，但我认为一定有一些优雅的方法来实现它。

因为它们是嵌套的，所以边距不必增加。。每一个都从其嵌套级别开始，因此它将添加到当前的边距中

放左边距：30px；所有人都应该这样做

---

但是，不确定是否有其他CSS定义可能会干扰这一点。。所以请详细说明..

可能是这样的。将嵌套列表放在某个容器元素中，并在该容器元素上运行以下操作：

function recursiveIndentation(element, indentation, increasingIndentation) {
    for (var i = 0; i < element.childNodes.length; i = i + 1) {
        if (element.childNodes[i].nodeName === "UL") {
            var span = document.createElement("SPAN");
            span.style.marginLeft = indentation + "px";
            element.insertBefore(span, element.childNodes[i])
            span.appendChild(element.childNodes[i + 1]);
            recursiveIndentation(span.childNodes[0], indentation + increasingIndentation, increasingIndentation);
        } else {
            recursiveIndentation(element.childNodes[i], indentation, increasingIndentation);
        }
    }
}

---

容器元素的innerHtml属性现在将保存所需的字符串。

对于仅CSS的解决方案：

ul { margin-left: 0 }
ul ul { margin-left: 30px }
ul ul ul { margin-left: 60px }
ul ul ul ul { margin-left: 90px }

---

不美观/通用/您要求的，但它至少非常简单，可能足够好。

我需要增加边距，因为我将在Flash文本字段中使用它，这与浏览器呈现HTML的方式不同。鉴于span元素可能没有ul元素作为子元素，您有什么可怕的系统要求您使用span元素包装ul元素？因为这将在flash中使用，所以我无法像上面那样使用CSS。

function recursiveIndentation(element, indentation, increasingIndentation) {
    for (var i = 0; i < element.childNodes.length; i = i + 1) {
        if (element.childNodes[i].nodeName === "UL") {
            var span = document.createElement("SPAN");
            span.style.marginLeft = indentation + "px";
            element.insertBefore(span, element.childNodes[i])
            span.appendChild(element.childNodes[i + 1]);
            recursiveIndentation(span.childNodes[0], indentation + increasingIndentation, increasingIndentation);
        } else {
            recursiveIndentation(element.childNodes[i], indentation, increasingIndentation);
        }
    }
}

ul { margin-left: 0 }
ul ul { margin-left: 30px }
ul ul ul { margin-left: 60px }
ul ul ul ul { margin-left: 90px }