如何使用 HTML 标记来包装指定元素之后的所有元素？答案

【问题标题】：How can I use an HTML tag to wrap all elements that follow a specified element?如何使用 HTML 标记来包装指定元素之后的所有元素？
【发布时间】：2022-11-04 16:35:31
【问题描述】：

我正在使用 Vue 2 和 Sanity.io，我需要一种方法来用 HTML 标签包围特定元素之后的所有元素，然后用另一个 HTML 标签包围这个元素以及后面的元素。

假设每个<h1> 后面都会有多个段落，然后是另一个<h1>，后面还有另一个段落。我希望将它们与摘要和详细信息 HTML 标记分开。

例如，我有来自 Sanity 的数据，它是这样的。

<h1>text</h1>
<p>text</p>
<p>text</p>
<p>text</p>

<h1>text</h1>
<p>text</p>
<p>text</p>
<p>text</p>

我需要一种操作 DOM 的方法，让它像这样读取我的数据

<details>
<summary><h1>text</h1></summary>
<p>text</p>
<p>text</p>
<p>text</p>
</details>

<details>
<summary><h1>text</h1></summary>
<p>text</p>
<p>text</p>
<p>text</p>
</details>

为了澄清更多，我使用protable-text-to-vue package 将数据作为 vue 组件块发回。基本上，它们以与上述示例类似的形式来自理智。

【问题讨论】：

sanity 的回复如何？
@BoussadjraBrahim 我编辑了问题以添加更多说明。
blocks 只是一个文本？如果是，您可以使用字符串方法替换标签
都是测试是的，有些是h3，有些是段落。你能提供一个例子或例子的来源吗？
考虑添加一个可运行minimal reproducible example。请注意，codesandbox 通过 CLI 使importing local projects 变得相当容易。

标签： javascript html css vue.js vuejs2

【解决方案1】：

我可以通过使用 mounted() 调用 getElementsByTagName() 来完成此操作：

https://www.w3schools.com/jsref/met_element_getelementsbytagname.asp

然后我遍历每个元素并用<summary> and <details> 标签包裹它。

ele.outerHTML =
                '<details><summary>' +
                ele.outerHTML +
                '</summary></details>'

然后我使用appendChild() 将所有h1 子项移动到<details> 标记内。

                let children = document.querySelectorAll(
                    `details:nth-child(index) ~ *:not(h1,h1 ~ *)`
                )

                Array.from(children).map(function(child) {
                    document
                        .getElementById(`uniqueId`)
                        .appendChild(child)
                })

【讨论】：