How to move the beginning and end tags of a HTML DOM element?

dom, dom-traversal, html, javascript, jquery

Solution

Use `unwrap` and `wrap`:

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

UPDATE: please note that the code above won't work if the form has nested raw text. You could wrap the form's children with another tag for it to work (also using `end` as pointed out by Yoshi in the comments):

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

Problem

How can I change this: ``` <div class="container"> <div class="span-19"> <div id="content"> <!-- variable amount of content --> <form class="move-me"> <!-- form --> </form> </div> </div> </div> ``` Into this: ``` <form class="move-me"> <div class="container"> <div class="span-19"> <div id="content"> <!-- variable amount of content --> <!-- form data --> </div> </div> </div> </form> ``` Using jQuery? Note, I specifically want to move only the `<form>` start and end tags, not the children elements of that form. Preferably I want some `jQuery.fn` so that I can do this: ``` $('.move-me').changeNesting('.container'); ``` Thanks in advance!

Original source