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!

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!

• javascript
• jquery
• html
• dom
• dom-traversal

Share Improve this question Follow edited Nov 3, 2012 at 23:21 Filip Roséen 64k2020 gold badges153153 silver badges200200 bronze badges asked Nov 3, 2012 at 23:19 AdamAdam 2,03133 gold badges3939 silver badges6262 bronze badges 4

• I would add the elements you want within the form tag to the form tag, and then delete the old. – Brad Commented Nov 3, 2012 at 23:24
• @PitaJ : Because I have a load of view files that are generated by Yii widgets within layouts. A dynamic hack like this will save a lot of time reformatting all the original HTML... – Adam Commented Nov 4, 2012 at 0:11
• 1 As a sidenote, you don't have to jump through all these hoops if you can use form-related attributes of input elements in your project. Here's more about it. – raina77ow Commented Nov 4, 2012 at 0:35
• @raina77ow - I've only just noticed this ment. This has just saved me a major headache and for me is the best answer. I know I asked for a jQuery solution, however, restructuring the DOM did all kinds of crazy things to my Yii activeform event handlers and also caused a CKEditor instance to duplicate itself. Using the HTML5 form attribute bypassed all of that nonsense. The solution is for an admin system with a closed user group locked to webkit browsers, to it's perfect for me. Thanks!!!! :) – Adam Commented Nov 4, 2012 at 2:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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 ments):

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

Using .wrap() and .detach() , like this:

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

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

demo http://jsfiddle/KX63Z/

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