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

Question

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!

Clayclaybank

I would add the elements you want within the form tag to the form tag, and then delete the old. – Farrago

@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... – Clayclaybank

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. – Chirlin

@Chirlin - I've only just noticed this comment. 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!!!! :) – Clayclaybank

Answer 1

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()
);​​​​

Kanal

@Adamski that's not even the code from the answer. Also this one works, while the accepted answer moves the children also. Which, as you pointed out, is not what you want the code to do!? – Sadiras

@Kanal using end you could skip the extra var. (jsfiddle.net/garRM) – Sadiras

@Sadiras : Am I missing something? It doesn't work. See: jsfiddle.net/gDc9d/2 – Clayclaybank

+1 from me as well, as it solves more interesting problem than the accepted answer. ) – Chirlin

@Adamski: it works if you don't have raw text like in your example. I've updated accordingly. – Songsongbird

Here's a proof. @Adamski - from what I remember, having text nodes as direct children of <form> element is not valid HTML. – Chirlin

Ok, you're right. This does what I want to achieve and works with sibling elements too: jsfiddle.net/gDc9d/5 – Clayclaybank

@Kanal and others - Many thanks to all for the discussion and answers, that's just saved me soooo much time! :) – Clayclaybank

@Kanal Bizarrely, when I do this in my actual page, it causes a duplicate of my CKEditor which is part of the <form class="move-me"> ... any idea why that might be? I've tried executing it in a self-executing anonymous function and have changed .container to .form-child-after-load, but neither change worked. – Clayclaybank

@Adamski: I don't know. Have you tried wrapping the contents of the form in a div or similar? – Songsongbird

Answer 2

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

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

Ideograph

solution deosn't place inner content in same place as original request – Spinks

... and it's (almost) the same as the first answer to this question, which was deleted - (probably) because its author also felt the inner elements should stay where they are. ) – Chirlin

Answer 3

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

demo http://jsfiddle.net/KX63Z/

Karikaria

Answer 4

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

Spinks