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 |
|
|
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
|
|
|
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
|
|
|
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
|
|
|