Javascript 仅以文本为目标，不以嵌套元素为目标

我只需要操纵嵌套列表的文本，而不必触摸下一个列表。我有这个：

<ul>
    <li>Some text here
        <ul>
            <li>Lorem</li>
            <li>ipsum dolor</li>
            <li>Another text here
                <ul>Lorem ipsum dolor</ul>
            </li>
        </ul>
    </li>
</ul>

<ul>
    <li><span>Some text here</span>
        <ul>
            <li>Lorem</li>
            <li>ipsum dolor</li>
            <li><span>Another text here<span>
                <ul>Lorem ipsum dolor</ul>
            </li>
        </ul>
    </li>
</ul>

这里有一些文字

洛勒姆
同侧阴沟
这里是另一个文本
Lorem ipsum dolor

我想把内部文本用一个空格括起来，这样我就有了：

<ul>
    <li>Some text here
        <ul>
            <li>Lorem</li>
            <li>ipsum dolor</li>
            <li>Another text here
                <ul>Lorem ipsum dolor</ul>
            </li>
        </ul>
    </li>
</ul>

<ul>
    <li><span>Some text here</span>
        <ul>
            <li>Lorem</li>
            <li>ipsum dolor</li>
            <li><span>Another text here<span>
                <ul>Lorem ipsum dolor</ul>
            </li>
        </ul>
    </li>
</ul>

这里有一些文字

洛勒姆
同侧阴沟
这里是另一个文本
Lorem ipsum dolor

您可以这样做（插入的span元素具有红色文本颜色）：

首先选择所需的li元素（“ul>li>ul>li:last of type”），然后获得包含“此处的另一个文本”（item.firstChild）的文本节点，创建一个包含其内容的span元素，并用span替换它

let item=document.querySelector（'ul>li>ul>li:type的最后一个'）；
让text=item.firstChild.textContent；
设span=document.createElement（'span'）；
span.textContent=文本；
span.style.color='红色'；
item.replaceChild（span，item.firstChild）

这里有一些文字

洛勒姆
同侧阴沟
这里是另一个文本
Lorem ipsum dolor



我知道它是jQuery和香草的混合体，但对我来说最有效的是：

$('.in-documents ul li').each(function() {
   var text = $(this).clone().children().remove().end().text();

    if($(this)[0].firstChild.textContent != "") {
        var span = document.createElement('span');
        span.textContent = text;
        $(this)[0].firstChild.textContent = '';
        $(this).prepend(span);
    }
});

是否要将范围添加到内部列表的所有项，还是仅添加最后一项？