Search KB Filter article types
jQuery plugin to compare and visualize HTML DOM nodes
The plugin provides functionality to compare two DOM nodes and build a well looking HTML page to visualize the difference.
Categories: Extensions
Tags: Developers, JavaScript, 2. Intermediate
Revision: 2
Posted: 01/March/2011
Updated: 01/March/2011
Status: Publish
Types: Article, Code

The ZIP contains source code, minified version and example HTML page running the script to compare two nodes #test1 and #test2.

jQuery Plugin home page

Follow this page to get latest release and to vote of course ;-).

Expected result

The plugin provides functionality to compare two DOM nodes and build a well looking HTML page to visualize the difference.

The resulting HTML displays widely accepted "inline comparison". Similar to the way the tools like WinMerge and TortoiseSVN do.

The result is gathered from traversing both nodes. To know whether fragments are equal you can check the status of comparison.

A few enhancements implemented only relevant to comparison of HTML.

  • Each fragment of style attribute compared individually
  • No value attributes like 'disabled' won't be compared by value
  • Ignores non-user specified attributes

The implementation is cross browser and tested on IE, Chrome and Firefox.

Example
$(function(){
    $("#output").html($("#test1").compare($("#test2"))); 
});
Application

jQueryCompare was developed as part of enabling the Visual WebGui framework to fully support jQuery as it's presentation engine and to eliminate the it's XSLT dependency.

The plugin provided us with ability to run comparison on results of XSLT and JQT transformation to instantly get the status and visualize the difference to make significantly easier the debugging process.

Screenshot
License

This article, along with any associated source code and files, is licensed under: General Public License (GPL)

About the author

Related Articles

Extensions  
Title Update Author
Learn the basics of how to migrate your custom-control to the new .NETHTML5 version of Visual WebGui
Tags: Developers, Theme, XML, XSLT, 2. Intermediate, 3. Advanced, Customization, v6.4 and Later
26/April/2011    2011/04/26
The JQT template engine is a robust jQuery template engine extension. It was created to provide powerful templating capabilities which are compatible (migratable) from XSLT. The JQT project includes runtime APIs which provide powerful capabilities and a XSLT migrator. The XSLT migrator can take XS...
Tags: Architects, Developers, Visual WebGui Pipeline, JavaScript, 2. Intermediate, 3. Advanced, Customization, Optimizing Performance, jQuery, v6.4 and Later
27/Feb/2011    2011/02/27
guy
The article describes how to use the debugging panel, migration hints and resource splitting in order to reach full functional equivalency between the original XSLT (WINWEB) version and targeted JQT (.NETHTML5) version.
Tags: Architects, Developers, HTML5, JavaScript, XML, XSLT
28/April/2011    2011/04/28