用jQuery替换DIV而不删除它

Question

I have a page which is generated and structured as a tree - nested DIVs, etc.. While the user views the page it is possible that some DIVs are updated on the server side and the changes are pushed to the client as JSON data, from which a DIV can be generated.

My problem is that even though I have the old DIV

var oldDiv = $('#foo');

and I have a new DIV generated by

var newDiv = generateDiv(jsonData);

I need to update the old one (both attributes and it's content) without deleting it. I was going to use the jQuery method .replaceWith() as such

oldDiv.replaceWith(newDiv);

but according to the documentation it is implemented as remove&create.

The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.

How can I update the old DIV without removing it? Is there some nice way to do this, or do I need to do it attribute by attribute?

Answer 1

As you've suggested, you may need to replace the attribute values individually. However, if it reads better, you can actually pass an object to the attr method, and it will update the values you supply.

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

If you wanted to loop through the attributes to build the object, you could do that like this.

var newAttributes = {};

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

oldDiv.attr(newAttributes);

Answer 2

It cannot be done since a div element may contain many elements. Why dont u just append the new contents into it. You can use jquery's append() method.

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

It will be appended as a child.

If at all you want to update any <p> element, you can use the html() function to get the contents of a

tag and then

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

Answer 3

I've come up with one solution so far, but if anyone comes up with a better one, I will gladly assign it as the correct one. I need to make this as clean as possible.

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());