javascript - jQuery 完全用另一个 DOM 替换元素的 DOM - 更快的方法？

Question

我正在使用 jQuery 的 AJAX 从服务器获取新内容。数据以 JSON 格式加载:

$.ajax({
    url: url,
    data: {
        'ajax': '1',
    },
    dataType: 'json',
    success: somefunction
});

由于服务器端应用程序限制，我无法在内部设置更多 JSON 变量，因此我必须将所有内容加载到内容中。这就是为什么我必须将结果加载到 jQuery 中，而不是搜索和替换页面上的一些元素，就像这样(在 somefunction 中使用):

var somefunction = function(data) {
    var con = $('<div></div>').html(data.content); // just $(data.content) is not working
    $('div#mainContent').html(con.find('div#ajax-content').html());
    ... // same process with three more divs
}

编辑:请注意，我必须执行相同的过程来替换三个 div!

还有更多相关内容，但作为示例，我希望这就足够了。我的问题:对于某种逻辑方式，我希望将结果加载到 DOM ($(data.content))，解析为 html (con.find('dix#ajax-content') .html()) 并返回 DOM ($('div#mainContent').html()) 在我看来就像失去一些资源并降低性能所以我想知道是否有更快的方法来直接加载 DOM，例如:

$('div#mainContent').dom(con.find('div#ajax-content').dom());

我试着用谷歌搜索它，但也许我不知道该输入什么。而且 jQuery 文档对我帮助不大。

一些事实:

• jQuery 1.9.1
• jQuery UI 1.10.3 可用

最后，我知道用服务器端应用程序做一些事情来提供更多 JSON 变量会好得多，但是，我需要编写不太容易的和平代码，这需要更长的开发时间我现在没有。在客户端执行此操作目前是临时解决方案，但是，我不想降低性能。

附带问题:

在这种情况下使用 find() 函数是否正确，还是有更好的函数？

编辑 2(无法解析字符串) 我期待这个工作，但它不是:

content = '<div id="ajax-title">Pečivo běžné, sladké, slané</div>
<div id="ajax-whereami"><a href="/category/4">Chléba a pečivo</a> » Pečivo běžné, sladké, slané</div>';
$(content);

Answer 1

我不确定这是否有帮助:

$('div#mainContent').replaceWith(con.find('div#ajax-content'))
 .attr("id","mainContent")

现在您不必设置元素的 html 并从 JSON 获取刚刚创建的元素的 html。不确定这是否真的更快，但它确实跳过了 2 个 html() 步骤。