jQuery Clone - check equality

Question

On my website, I clone a div's contents when the page loads, and then I check whether or not the contents have changed.

originalStepOrder = $('#org').clone();
console.log(originalStepOrder[0] == $('#org')[0]);

I expected that the last line of code would return true when I haven't made any changes to the div's contents, but it returns false.

I also tried

console.log(originalStepOrder.is($('#org'));

which also returns false.

How can I check whether or not two divs have the same content?

Elements are basically DOM Interface objects, when you compare objects' equality it will only return true when both references reference the same object. And it depends on what you consider "same content" - just text? Properties? Properties and Attributes? Expando-properties? — Fabrício Matté, Apr 13 '13 at 17:09
hey, thanks for your response. I ended up finding that comparing the html of both elements worked! — scientiffic, Apr 13 '13 at 17:10

score 2 · Accepted Answer · answered Apr 13 '13 at 17:10

2

Whoops, posted too soon–I was able to figure out the answer. This is what ended up working for me:

$('#org').html()==originalStepOrder.html()

answered Apr 13 '13 at 17:10

scientiffic

Well yes, `.html()` returns the element's `innerHTML` which contains all serializable properties of descendant elements.. Some properties aren't serializable e.g. `value`, see [demo](http://jsfiddle.net/2c2dB/). More about this [here](http://stackoverflow.com/questions/11778123/why-arent-some-technically-serializable-input-properties-serializable). But yes, depending on your use case, comparing `innerHTML` will suffice.. – Fabrício Matté Apr 13 '13 at 17:17

1 Answers1