Converting HTML Strings to DOM

An interactive survey of common browser APIs for turning HTML text into DOM nodes, including context validity, script behavior, attribute risks, and performance tradeoffs.

1. innerHTML

Code:
Result:

2. insertAdjacentHTML

Code:
Result:

3. DOMParser

Code:
Result:

4. Range.createContextualFragment

Code:
Result:

5. Table Tags Need a Valid Context

Code:
Result:

6. Template Converts Arbitrary Tags

Code:
Result:

7. Script Tags vs Event Attributes

Code:
Result:

The event-attribute example is shown as escaped text, because running user-supplied onerror/onload handlers would be an XSS demonstration.

8. Performance Tradeoff

Code:
Result:
700

Micro benchmarks vary by browser and machine. The practical takeaway is that DOMParser is often slower, while ordinary parsing is usually cheap enough that clarity and safety matter more.

9. Quick Selection Guide

Code:
Result: