如何使用 jQuery 替换内存中的 DOM 节点答案

【问题标题】：How can I replace DOM node within memory using jQuery如何使用 jQuery 替换内存中的 DOM 节点
【发布时间】：2011-07-05 22:50:54
【问题描述】：

我有以下代码

$.getJSON("../services/getNavigationAffectedList.php", obj, function(response)
{
    $.each(response, function(i, v)
    {
        // Get the old page source
        var source = v;

        // Get the updated preview HTML
        var new_nav = $('#preview').find('#navigation-block').html();

        // Replace the old navigation with the preview HTML
        $(source).find('.navigation-block').html(new_nav);
        var source = $(source).html();

        var obj = {
            page_path: i,
            new_source: source
        };
        console.log(obj);
    });

它试图替换内存中包含的 DOM 中的导航块类（源）。虽然，$(source).html() 不会产生预期的结果。

帮助？

大卫请求的部分 JSON 响应：

{"\/var\/www\/html\/cms\/sites\/about\/debbie.php":"\r\n ...这里还有很多 html ....}

这是一个可供测试的小提琴： http://jsfiddle.net/eZP9E/1/

【问题讨论】：

您能否包含一个 JSON 的小示例，或者（甚至更好）一个演示问题的链接？如果您没有实时链接，jsfiddle.net 是一个很好的工具。
{"\/var\/www\/html\/cms\/sites\/about\/debbie.php":""-\/\/W3C\ /\/DTD XHTML 1.0 Strict\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\">\r\n ...这里还有很多 html ....}
@syn4k：对不起，最后的评论应该是什么？ 在问题中编辑其他详细信息，而不是 cmets。
@David，最后一条评论是为了响应 Matt 的 JSON 示例请求
@syn4k，啊，好吧。嗯，你能把它编辑成问题吗？它是可以告知答案的附加信息，因此构成问题本身的一部分，而不是讨论或想法，关于问题的目的/用途cmets系统。 =)

标签： jquery dom memory replace

【解决方案1】：

试试 jQuery 的 replaceWith 函数。这是你要找的吗？

http://api.jquery.com/replaceWith/

你得到什么不想要的结果？

更新：原来问题在于它在 jQuery 中创建 DOM 元素的方式。

您的代码期望 'var original' 是元素，但它不是。

var container = $('<html><body><div class="navigation">1</div></body></html>');
alert(container.length); // returns 1, div.navigation

var container = $('<html><body><div class="navigation">1</div><div class="body"></div></body></html>');
alert(container.length); // returns 2, div.navigation, div.body

var container = $('<div id="root"><html><body><div class="navigation">1</div></body></html></div>');
alert(container.length); // returns 1, sweet! we can use this

经过一些测试，这些是我从上面的代码中得到的结果。

您的问题的快速解决方案是将代码更新为以下内容：

var original = $('<div id="root">' + v + '</div>', document);

【讨论】：

有趣的是，replaceWith 似乎只适用于页面 DOM，而不是我的 sn-p 中的内存 DOM。
@syn4k，我已经更新了我的答案。我已经对你的小提琴进行了一次更新，它就像一个魅力：jsfiddle.net/eZP9E/3