相关疑难解决方法(0)

我的html代码看起来大致如下:

<div id="id1">
  <div id="id2">
    <p>some html</p>
    <span>maybe some more</span>
  </div>
  <div id="id3">
    <p>different text here</p>
    <input type="text">
    <span>maybe even a form item</span>
  </div>
</div>

显然还有更多的东西,但这是基本的想法.我需要做的是切换#id2和#id3的位置,结果是:

<div id="id1">
  <div id="id3">...</div>
  <div id="id2">...</div>
</div>

有没有人知道一个函数(我确定我不是第一个需要这个功能的人),它可以读取和写入两个节点(及其所有子节点),以便在DOM中交换它们的位置？

我在内容管理系统的限制下工作,有时迫使我做一些奇怪的事情,因为我没有完全控制HTML代码.

在这种情况下,我有一种情况,我希望一个DIV不嵌套在另一个DIV中.由于CMS设置,我不能只在HTML代码中重新排序DIV.

所以,我有这个:

<div class="blog">
   <div class="free-me">
      Hello world
   </div>
</div>

我需要的是:

<div class="blog">
</div>
<div class="free-me">
   Hello world
</div>
<div class="blog">
</div>

如果我可以访问HTML,这就像复制和粘贴一些行一样简单.但是,因为我不能只改变HTML,我想知道的是,有什么方法可以使用CSS或JavaScript关闭blogDIV,这样free-me就可以成为兄弟.

我试过这个(即使我知道它不会起作用):

.free-me::before {
    content: '</div>';
}

正如所怀疑的那样,只是呈现了</div>进入页面的文本.

对于JavaScript,我当然不是专家,但似乎你只能插入带有开始和结束标签的完整元素,并且命令就像document.createElement('div');我看不到采用现有DIV并关闭它的明确方法.

有没有办法,无论是使用CSS还是JavaScript,我都可以强制DIV关闭或插入结束</div>标记？

注意:最好是非jQuery解决方案.