解开span父节点，并用独立的span节点包装每个文本子节点

Question

使用Javascript（和TreeWalker API，但不使用JQuery）我想提取<span>父节点的每个文本节点（我想在之后解开），然后用<span>标记包含具有父节点的所有相同属性。如果<span>父节点内还有其他标签，则只能按原样维护它们，并在重构句子时以正确的顺序保留它们。
请参见以下示例：

如果网页具有以下结构：

<div>
   ...
   <span id="x" style="w" class="z"> //parent node to unwrap
       Lorem ipsum
       <em> dolor sit </em>
       amet
   </span>
   ...
</div>

我想获得这个结果：

<div>
   ...
   <span id="x" style="w" class="z"> Lorem </span>
   <span id="x" style="w" class="z"> ipsum </span>
   <em> dolor sit </em>
   <span id="x" style="w" class="z"> amet </span>    
   ...
</div>

我看到我可以获得主<span>的父节点（将被展开）并在其前面插入每个子节点（使用insertBefore（）方法），但是我不知道如何迭代通过其子级，用新的<span>标签包装文本节点的每个单词，并按示例所示保留节点的顺序。
你能帮我吗？谢谢！