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

Question

我该如何修改这个：

<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');

Thanks in advance!

- Adam

---

我会在表单标签中添加您想要的元素，然后删除旧的。 - Brad

@PitaJ：因为我有很多由Yii小部件在布局中生成的视图文件。这样的动态hack将节省大量重新格式化所有原始HTML的时间... - Adam

顺便提一下，如果您的项目可以使用input元素的与form相关的属性，则无需跳过所有这些步骤。在此处了解更多。 - raina77ow

@raina77ow - 我刚刚注意到了这个评论。这真的为我解决了一个大问题，对我来说是最好的答案。我知道我要求使用jQuery解决方案，但重构DOM会对我的Yii活动表单事件处理程序产生各种疯狂的影响，并导致CKEditor实例自我复制。使用HTML5的form属性可以避免所有这些麻烦。该解决方案适用于带有封闭用户组的管理系统，仅限于webkit浏览器，非常适合我。谢谢！！！ :) - Adam

Answer 1

使用 unwrap 和 wrap 方法：

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

更新：请注意，如果表单中有嵌套的原始文本，则上面的代码将无法正常工作。您可以使用另一个标签包装表单的子元素以使其正常工作（还要使用end，正如Yoshi在评论中指出的那样）：

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

- Jordão

---

@Adamski，那甚至不是答案中的代码。此外，这个代码可以工作，而被接受的答案也会移动子元素。正如你指出的那样，这不是你想要的代码！？ - Yoshi

@Jordão 使用 end，您可以省略额外的变量。(http://jsfiddle.net/garRM/) - Yoshi

@Yoshi：我错过了什么吗？它不起作用。请参见：http://jsfiddle.net/gDc9d/2/ - Adam

@Adamski：如果你的例子中没有原始文本，它就能正常工作。我已经相应地更新了。 - Jordão

@Jordão和其他人 - 非常感谢大家的讨论和回答，这节省了我很多时间！ :) - Adam

Answer 2

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

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

- Nelson

---

解决方案未将内部内容放置在原始请求的相同位置。 - charlietfl

这个答案与此问题的第一个答案（几乎）相同，该答案已被删除 - （可能是因为）其作者也认为内部元素应保持原样。 - raina77ow

Answer 3

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

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

- Atif

Answer 4

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

- charlietfl