insertHTML breaks DOM structure and formatting
OS: Windows 11 · Device: Desktop or Laptop Any · Browser: Chrome 120.0 · Keyboard: US
Open case →Scenario
insertHTML breaks DOM structure and formatting
When using document.execCommand('insertHTML', ...) to insert HTML content into a contenteditable region, the DOM structure may be broken or reformatted unexpectedly. Nested elements may be flattened or reorganized.
formatting
Scenario ID
scenario-insertHTML-behavior
Details
When using document.execCommand('insertHTML', ...) to insert HTML content into a contenteditable region, the DOM structure may be broken or reformatted unexpectedly. Nested elements may be flattened or reorganized.
References
- W3C Editing: execCommand insertHTML - execCommand specification
- Stack Overflow: Chrome execCommand insertHTML behavior - Attribute stripping issues
- Stack Overflow: Weird behaviour with execCommand insertHTML - Nested element issues
- Stack Overflow: Keep execCommand insertHTML from removing attributes - Range API alternatives
Scenario flow
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Variants
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| ce-0045-insertHTML-breaks-structure | Windows 11 | Desktop or Laptop Any | Chrome 120.0 | US | draft |
Cases
Open a case to see the detailed description and its dedicated playground.
Related Scenarios
Other scenarios that share similar tags or category.
Tags: formatting, chrome
execCommand is deprecated but still widely used for formatting
The document.execCommand() API, which is commonly used to apply formatting (bold, italic, etc.) in contenteditable regions, has been deprecated. However, there is no complete replacement, and many implementations still rely on it. This creates uncertainty about future browser support.
1 case
Tags: formatting
Code block editing behavior varies across browsers
Editing text within code blocks (<pre><code>) in contenteditable elements behaves inconsistently across browsers. Line breaks, indentation, whitespace preservation, and formatting may be handled differently, making it difficult to maintain code formatting.
4 cases
Tags: dom
Empty elements accumulate in DOM during editing
During editing operations, empty elements (empty paragraphs, divs, spans with no content) accumulate in the DOM. These elements can cause layout issues, make the HTML bloated, and create unexpected behavior. Browsers handle empty element cleanup inconsistently.
5 cases
Tags: formatting
Font family changes behave inconsistently
Changing font family in contenteditable elements behaves inconsistently across browsers. The font-family CSS property may be applied inline, as a style attribute, or may not be applied at all. The behavior also varies when editing text after applying a font.
3 cases
Tags: formatting
Bold formatting is lost when typing after applying bold
When applying bold formatting to selected text and then continuing to type, the bold formatting is not maintained for the newly typed characters in Safari.
4 cases
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.