如何移动 HTML DOM 元素的开始和结束标签？答案

【问题标题】：How to move the beginning and end tags of a HTML DOM element?如何移动 HTML DOM 元素的开始和结束标签？
【发布时间】：2012-11-04 08:15:50
【问题描述】：

我该如何更改：

<div class="container">
  <div class="span-19">
    <div id="content">
       <!-- variable amount of content -->
         <form class="move-me">
        <!-- form -->
         </form>
    </div>
  </div>
</div>

进入这个：

<form class="move-me">
  <div class="container">
    <div class="span-19">
      <div id="content">
        <!-- variable amount of content -->
        <!-- form data -->
      </div>
    </div>
  </div>
</form>

使用 jQuery？请注意，我只想移动 <form> 开始和结束标记，而不是该表单的子元素。最好我想要一些 jQuery.fn 以便我可以这样做：

$('.move-me').changeNesting('.container');

提前致谢！

【问题讨论】：

我会在表单标签中添加你想要的元素到表单标签中，然后删除旧的。
@PitaJ ：因为我有大量由 Yii 小部件在布局中生成的视图文件。像这样的动态 hack 将节省大量重新格式化所有原始 HTML 的时间...
作为旁注，如果您可以在项目中使用与form 相关的input 元素属性，则不必跳过所有这些障碍。这是more 的相关信息。
@raina77ow - 我刚刚注意到这条评论。这让我很头疼，对我来说是最好的答案。我知道我要求一个 jQuery 解决方案，但是，重组 DOM 对我的 Yii activeform 事件处理程序做了各种疯狂的事情，并且还导致 CKEditor 实例复制自身。使用 HTML5 form 属性绕过了所有这些废话。该解决方案适用于具有锁定到 webkit 浏览器的封闭用户组的管理系统，这对我来说是完美的。谢谢！！！！ :)

标签： javascript jquery html dom dom-traversal

【解决方案1】：

使用unwrap 和wrap：

var toMove = $('.move-me');
toMove.children().unwrap();
$('.container').wrap(toMove);

更新：请注意，如果表单有嵌套的原始文本，上面的代码将不起作用。您可以用另一个标签包装表单的子项以使其工作（也使用 end，正如 Yoshi 在 cmets 中指出的那样）：

$('.container').wrap(
  $('.move-me').wrapInner('<div class="nostyle"/>').children().unwrap().end()
);

【讨论】：

@Adamski 这甚至不是答案中的代码。这一个也有效，而公认的答案也让孩子们感动。正如您所指出的，这不是您希望代码执行的操作！？
@Jordão 使用 end 你可以跳过额外的变量。 (jsfiddle.net/garRM)
@Yoshi：我错过了什么吗？它不起作用。见：jsfiddle.net/gDc9d/2
我也是+1，因为它解决了比公认答案更有趣的问题。 )
@Jordão 和其他人 - 非常感谢大家的讨论和回答，这为我节省了很多时间！ :)

【解决方案2】：

使用 .wrap() 和 .detach() ，像这样：

$('.container').wrap( $('form.move-me').detach() );

【讨论】：

解决方案不会将内部内容放置在与原始请求相同的位置
... 它（几乎）与这个问题的第一个答案相同，该答案已被删除 - （可能）因为它的作者也认为内部元素应该留在原处。 )

【解决方案3】：

$('.move-me').replaceWith(function() {
    return $('*', this);
});
$('.container').wrap('<form class="move-me" />');

演示http://jsfiddle.net/KX63Z/

【讨论】：

【解决方案4】：

var $form=$('form.move-me')
$form.replaceWith($form.html()));
$('.container').wrap('<form class="move-me">');

【讨论】：