Case ce-0045-insertHTML-breaks-structure · Scenario scenario-insertHTML-behavior

insertHTML breaks DOM structure and formatting

OS: Windows 11 Device: Desktop or Laptop Any Browser: Chrome 120.0 Keyboard: US Status: draft
insertHTML dom formatting chrome

Phenomenon

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.

Reproduction example

  1. Create a contenteditable div.
  2. Select a position within it.
  3. Use document.execCommand('insertHTML', false, '<p><strong>Bold text</strong></p>').
  4. Inspect the resulting DOM structure.

Observed behavior

  • In Chrome on Windows, insertHTML may break the DOM structure.
  • Nested elements may be flattened or reorganized.
  • Formatting may be lost or changed unexpectedly.

Expected behavior

  • insertHTML should preserve the HTML structure as provided.
  • Nested elements should remain nested.
  • Formatting should be maintained.
Before
Hello World
Basic text
❌ After insertHTML (Bug)
Hello Bold text World
DOM structure damaged, &lt;p&gt; tags lost, nested structure flattened
vs
✅ Expected
Hello

Bold text

World
Expected: HTML structure preserved, nested elements maintained

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: Windows 11
Device: Desktop or Laptop Any
Browser: Chrome 120.0
Keyboard: US
Your environment
Sample HTML:
Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.

Comments & Discussion

Have questions, suggestions, or want to share your experience? Join the discussion below.