通过JavaScript显示HTML层次结构

我的任务是：获取连续文本（html），并在

标记中以所需的缩进像普通html一样呈现该文本。我怎样才能做到简单

<!-- From -->
`<div><p>Hello World</p><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div>`

<!-- To -->
`<div>
    <p>Hello World</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>`

例如：

` 你好，世界
第1项
第2项
第3项
`
`
你好，世界


项目1
项目2
项目3

`

另外，我有真实的文本资源，并通过

$（elemen）插入结果。查找（'pre'）。文本（结果）

1）

它是一个JS美化器，但也适用于HTML

(二)