javascript - 使用 javascript 将 div 与 canvas 元素交换

Question

我有 2 个 div。每个 div 都有一个 canvas 元素。在程序开始时，我在 Canvas 上放置了一个图像。图像不同。然后我尝试使用

交换 div

    var contentofmyfirstdiv = $('#myfirstdiv').html();
    var contentofmyseconddiv = $('#myseconddiv').html();

    $('#myseconddiv').html(contentofmyfirstdiv);
    $('#myfirstdiv').html(contentofmyseconddiv)

;

一切正常，除了每个 Canvas 都是空的。似乎“contentof...”没有从 Canvas 中获取图像...有人知道如何交换 Canvas 的内容吗？我正在使用火狐浏览器。

Answer 1

您正在序列化为 html 并重新解析它，这是有损操作。相反，你应该操作直接在实时 DOM 树上:

var contentofmyfirstdiv = $('#myfirstdiv').children().detach();
var contentofmyseconddiv = $('#myseconddiv').children().detach();

$('#myseconddiv').append(contentofmyfirstdiv);
$('#myfirstdiv').append(contentofmyseconddiv)

这是一个不公正的演示，但仍然 http://jsfiddle.net/9JdqQ/

与序列化相比，保留的是不可序列化的属性、事件监听器、元素数据( Canvas 图像等)..