如何解开Vue DOM元素并保留其位置

Question

我正在使用VuePress，后者将Markdown生成为HTML。每个Markdown元素都在<p>标签内呈现。但是，我想通过在<p>标签包含图像或视频时展开包装来修改生成的HTML文档。

我已将代码添加到页面（组件）的mounted() Vue生命周期挂钩中。

这有效：当我第一次访问另一个页面时，解包的内容显示在与其父页面相同的位置。

这不起作用：直接访问该页面，该内容显示在页面上其余Markdown内容的下方。不在其原始位置。

const elements = this.$refs.content.$el.querySelectorAll("p img, p video"); // Note: Using document.querySelectorAll yields the same results
Array.from(elements).forEach(el => {
  let elParentNode = el.parentNode;
  if (elParentNode !== document.body) {
    elParentNode.parentNode.insertBefore(el, elParentNode);
    elParentNode.parentNode.removeChild(elParentNode);
  }
});

要求：

• 解包的内容（img，视频）应与父内容原来的位置完全相同，而不是在所有其他内容下方。
• 当直接访问组件以及导航到该组件时，这应该起作用。
• 不依赖jQuery