Try It

Instructions

This page provides an excellent way to test the HTML parser!  The DOM is shown graphically, allowing you to reorder elements and attributes using drag-and-drop, and edit the contents of nodes.
You can play around with the example HTML already populated below, or you can paste in your HTML into the text box below.

HTML

This section contains the text version of the HTML.  Feel free to use the default HTML and skip right to the DOM section to play around.
Or, paste your HTML here, or edit the HTML already here. Then, click the Down button to convert it to the DOM tree.

Import & Export

Click the Down button to import the above HTML into the HTML Parser and show it in the DOM tree below. Click the Up button to export the DOM tree below back to HTML in the above text box.

DOM

View and edit the DOM here. Then click the Up button to the export the modified DOM back to HTML, replacing the HTML in the above text box.

Tree

Symbol Key

  • ededplust Insert new DOM element
  • edit Edit value
  • ededpreviewt View full value (when value is too long to fully visible in tree)
  • ededfiltert Unhide DOM properties
  • ededt Hide DOM properties
  • ededt Click to expand child nodes or properties
Scroll to Top