0

DOMに 2 つの<div>要素があるとします。次のように、jQuery を使用してマークアップを簡単に切り替えることができます。

function switch_html(el1, el2){
        var el1_content = el1.html();
        var el2_content = el2.html();
        el1.html(el2_content);
        el2.html(el1_content);
}

ただし、HTMLソースをコピーして切り替えるだけでなく、DOM要素を実際に切り替えるにはどうすればよいですか? たとえば、現在開発中のアプリでは<div>、入力済みのフィールドを含むコンテンツを交換してい<input>ます。これらのフィールドのソース HTML を単にコピーすると、入力に含まれる値が失われます。

4

2 に答える 2

2

jQuery の append / element.appendChild を使用して、実際の DOM ノードを移動できます。実際の DOM ノードを移動し、コピー/クローンを作成しようとしないでください。

これを試して：

var children1 = $('#el1').children();
var children2 = $('#el2').children();

$('#el1').append(children2);
$('#el2').append(children1);
于 2012-12-24T03:57:59.810 に答える
0

javascript には、true が渡されると「ディープ」クローンを実行する cloneNode() 関数があります。

そう：

 function switch_html(el1, el2){
      var el1Clone = el1.cloneNode(true);
      var el2Clone = el2.cloneNode(true);
      el2.replaceNode(el1Clone);
      el1.replaceNode(el2Clone);
 }

または、（わずかに）よりパフォーマンスの高いソリューションの場合：

 function switch_html(el1, el2){
      var el2Clone = el2.cloneNode(true);
      el2.replaceNode(el1);
      el1.replaceNode(el2Clone);
 }

ここでの前提は、生の JavaScript でこれを行うことです。つまり、jQuery は使用しません。

于 2012-12-24T03:53:29.293 に答える