Question

我有一个生成并构建为树的页面 - 嵌套的DIV等。当用户查看页面时，可能在服务器端更新了一些DIV，并将更改作为JSON推送到客户端数据，可以从中生成DIV。

我的问题是即使我有旧的DIV

var oldDiv = $('#foo');

我有一个由

生成的新DIV

var newDiv = generateDiv(jsonData);

我需要更新旧的（属性及其内容）而不删除它。我本来打算使用jQuery方法.replaceWith()

oldDiv.replaceWith(newDiv);

但根据文档，它实现为remove＆amp; create。

.replaceWith（）方法从DOM中删除内容，并通过一次调用在其位置插入新内容。

如何在不删除旧DIV的情况下更新旧DIV？有没有一些很好的方法来做到这一点，还是我需要按属性进行属性？

Answer 1

正如您所建议的那样，您可能需要单独替换属性值。但是，如果它读得更好，您实际上可以将对象传递给attr方法，它将更新您提供的值。

oldDiv.attr({
    attr1: newDiv.attr1,
    attr2: newDiv.attr2,
    attr3: newDiv.attr3
});

如果你想遍历属性来构建对象，你可以这样做。

var newAttributes = {};

$.each(newDiv[0].attributes, function(index, attribute){
   newAttributes[attribute.name] = attribute.value;
});

oldDiv.attr(newAttributes);

Answer 2

由于div元素可能包含许多元素，因此无法完成。为什么不把新内容添加到其中。您可以使用jquery的append()方法。

$(oldDiv).append("#new_div_id");

它将作为一个孩子附加。

如果您想要更新任何<p>元素，可以使用html()函数获取

标记的内容，然后

old_para_contents=("p").html();
$("p").html(old_para_contents+"New contents");

Answer 3

到目前为止，我已经提出了一个解决方案，但如果有人想出更好的解决方案，我很乐意将其指定为正确的解决方案。我需要尽可能保持干净。

var oldDiv = $('#my-old-div');
var newDiv = generateDiv(data);

oldDiv.attr("id", newDiv.attr("id"));
oldDiv.attr("class", newDiv.attr("class"));
//...
oldDiv.html(newDiv.html());

用jQuery替换DIV而不删除它

3 个答案: