is it possible to move a div inside another div using jquery without re-rendering the html?

Question

Okay, I might confuse some people who might be able to answer this question, I'll set this in the manner that I understand. Please bear with me.

Let's say I have an array of divs in this manner:

<div id="par1"><span>Text 1</span></div>
<div id="par2"><span>Text 1</span></div>
<div id="par3"><span>Text 1</span></div>
<div id="par4"><span>Text 1</span></div>

Then, I have a hidden div with a textbox that acts like an editor:

<div id="editor" style="display: hidden"><input id="uniqueID$textbox" type="text" /></div>

What I want to achieve in jQuery is to visually display the #editor div within the divs above when i click each div somewhat an editor. Instead of having seperate input boxes within those divs and displaying them when needed, I intend to just use one textbox for each.

I hope I explained my problem well and hope you guys can help

Answer 1

You can clone the div with id editor and put inside the clicked divs like this:

var $clone = $('#editor').clone();

$('div[id^="par"]').click(function(){
  $(this).append($clone);
});

See the working example here

Answer 2

You might want to replace the <span> with an <input> element on click, like

$(function(){
  $('span').bind('click', function(){
     $(this).replaceWith($('<input/>', {
        id:       'newinp',
        type:     'text',
        focusout: function(){
           $(this).replaceWith('<span>' + $(this).val() + '</span>');
        }
     }));       
     $('#newinp').focus();
  });
});​

Working example: http://www.jsfiddle.net/qbDKN/

Answer 3

You can't avoid re-rendering HTML but I suspect you simply meant re-rendering the entire page. Certainly possible in JS, in jquery I believe you want a combination of detach() and one of the append() / prepend() / *pendTo() methods as per the documentation example here.