在元素之间翻转文本输入字段，包括用户创建的value属性

Question

嗨，我正在尝试在两个div元素之间翻转输入字段。 但是，如果用户在字段中输入文本，则文本在翻转后会消失。 有没有办法确保此value属性也被翻转？ 谢谢。

Javascript：

function Flip ()
{
    var oldslave = $('div.slave').html();
    var oldmaster = $('div.master').html();
    $('div.slave').html(oldmaster);
    $('div.master').html(oldslave);
}

HTML：

<div class="master">
    <input type="text" name="master" id="master" size="42">
</div>
<input type="button" id="button1" onclick="Flip()" value="Flip">
<div class="slave">
    <input type="text" name="slave" id="slave" size="42" class="slavefield">
</div>

Answer 1

您可以使用如下克隆方法：

function Flip() {
    var oldslave = $('div.slave input').clone();
    var oldmaster = $('div.master input').clone();
    $('div.slave').html(oldmaster);
    $('div.master').html(oldslave);
}

http://jsfiddle.net/MaESg/

还有另一种无需使用克隆即可实现相同目的的变体：

function Flip() {
    $('.master').find('input').appendTo('.slave').prev().appendTo('.master');
}

这是可取的，因为附加（移动）节点比重新创建更有效。

http://jsfiddle.net/MaESg/1/