Как переместить начальный и конечный теги 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');

Заранее спасибо!

Answer 1

Использование unwrap а также wrap:

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

ОБНОВЛЕНИЕ: обратите внимание, что приведенный выше код не будет работать, если форма имеет вложенный необработанный текст. Вы можете обернуть детей формы другим тегом, чтобы он работал (также используя end как указал Йоши в комментариях):

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

Answer 2

Используя .wrap() и .detach (), вот так:

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

Answer 3

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

демо-версия http://jsfiddle.net/KX63Z/

Answer 4

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