https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML

  * Skip to main content
  * Skip to search

 
HTML

HTML: Markup language

HTML reference
      + Elements
      + Global attributes
      + Attributes
      + See all...

HTML guides
      + Responsive images
      + HTML cheatsheet
      + Date & time formats
      + See all...

Markup languages
      + SVG
      + MathML
      + XML

CSS

CSS: Styling language

CSS reference
      + Properties
      + Selectors
      + At-rules
      + Values & units
      + See all...

CSS guides
      + Box model
      + Animations
      + Flexbox
      + Colors
      + See all...

Layout cookbook
      + Column layouts
      + Centering an element
      + Card component
      + See all...

JavaScriptJS

JavaScript: Scripting language

JS reference
      + Standard built-in objects
      + Expressions & operators
      + Statements & declarations
      + Functions
      + See all...

JS guides
      + Control flow & error handing
      + Loops and iteration
      + Working with objects
      + Using classes
      + See all...

Web APIs

Web APIs: Programming interfaces

Web API reference
      + File system API
      + Fetch API
      + Geolocation API
      + HTML DOM API
      + Push API
      + Service worker API
      + See all...

Web API guides
      + Using the Web animation API
      + Using the Fetch API
      + Working with the History API
      + Using the Web speech API
      + Using web workers

All

All web technology

Technologies
      + Accessibility
      + HTTP
      + URI
      + Web extensions
      + WebAssembly
      + WebDriver
      + See all...

Topics
      + Media
      + Performance
      + Privacy
      + Security
      + Progressive web apps

Learn

Learn web development

Frontend developer course
      + Getting started
      + Common questions
      + Curriculum

Learn HTML
      + Introduction to HTML
      + Getting started with HTML

Learn CSS
      + What is CSS
      + Getting started with CSS

Learn JavaScript
      + How to use data attributes
      + Add JavaScript to your web page

Tools

Discover our tools

  * Playground
  * HTTP Observatory

  * Border-image generator
  * Border-radius generator
  * Box-shadow generator
  * Color format converter
  * Color mixer
  * Shape generator

About

Get to know MDN better

  * About MDN
  * Advertise with us

  * Community
  * MDN on GitHub

Blog
Toggle sidebar

 1. Web
 2. Web APIs
 3. Element
 4. setHTML()

Theme

  * OS default
  * Light
  * Dark

English (US)
[ ] Remember language  Learn more

  * Deutsch
  * English (US)
  * Ri Ben Yu 

Element: setHTML() method

Limited availability

This feature is not Baseline because it does not work in some of the
most widely-used browsers.

  * Learn more
  * See full compatibility
  * Report feedback

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in
production.

The setHTML() method of the Element interface provides an XSS-safe
method to parse and sanitize a string of HTML into a DocumentFragment
, and then insert it into the DOM as a subtree of the element.

In this article

  * Syntax
  * Description
  * Examples
  * Specifications
  * Browser compatibility
  * See also

Syntax

js

setHTML(input)
setHTML(input, options)

Parameters

input

    A string defining HTML to be sanitized and injected into the
    element.

options Optional

    An options object with the following optional parameters:

    sanitizer

        A Sanitizer or SanitizerConfig object which defines what
        elements of the input will be allowed or removed, or the
        string "default" for the default configuration. Note that
        generally a "Sanitizer is expected to be more efficient than
        a SanitizerConfig if the configuration is to reused. If not
        specified, the default sanitizer configuration is used.

Return value

None (undefined).

Exceptions

TypeError

    This is thrown if options.sanitizer is passed a:

      + non-normalized SanitizerConfig (one that includes both
        "allowed" and "removed" configuration settings).
      + string that does not have the value "default".
      + value that is not a Sanitizer, SanitizerConfig, or string.

Description

The setHTML() method provides an XSS-safe method to parse and
sanitize a string of HTML into a DocumentFragment, and then insert it
into the DOM as a subtree of the element.

setHTML() drops any elements in the HTML input string that are
invalid in the context of the current element, such as a <col>
element outside of a <table>. It then removes any HTML entities that
aren't allowed by the sanitizer configuration, and further removes
any XSS-unsafe elements or attributes -- whether or not they are
allowed by the sanitizer configuration.

If no sanitizer configuration is specified in the options.sanitizer
parameter, setHTML() is used with the default Sanitizer
configuration. This configuration allows all elements and attributes
that are considered XSS-safe, thereby disallowing entities that are
considered unsafe. A custom sanitizer or sanitizer configuration can
be specified to choose which elements, attributes, and comments are
allowed or removed. Note that even if unsafe options are allowed by
the sanitizer configuration, they will still be removed when using
this method (which implicitly calls Sanitizer.removeUnsafe()).

setHTML() should be used instead of Element.innerHTML for inserting
untrusted strings of HTML into an element. It should also be used
instead of Element.setHTMLUnsafe(), unless there is a specific need
to allow unsafe elements and attributes.

Note that since this method always sanitizes input strings of
XSS-unsafe entities, it is not secured or validated using the Trusted
Types API.

Examples

Basic usage

This example shows some of the ways you can use setHTML() to sanitize
and inject a string of HTML.

js

// Define unsanitized string of HTML
const unsanitizedString = "abc <script>alert(1)<" + "/script> def";
// Get the target Element with id "target"
const target = document.getElementById("target");

// setHTML() with default sanitizer
target.setHTML(unsanitizedString);

// Define custom Sanitizer and use in setHTML()
// This allows only elements: div, p, button (script is unsafe and will be removed)
const sanitizer1 = new Sanitizer({
  elements: ["div", "p", "button", "script"],
});
target.setHTML(unsanitizedString, { sanitizer: sanitizer1 });

// Define custom SanitizerConfig within setHTML()
// This removes elements div, p, button, script, and any other unsafe elements/attributes
target.setHTML(unsanitizedString, {
  sanitizer: { removeElements: ["div", "p", "button", "script"] },
});

setHTML() live example

This example provides a "live" demonstration of the method when
called with different sanitizers. The code defines buttons that you
can click to sanitize and inject a string of HTML using a default and
a custom sanitizer, respectively. The original string and sanitized
HTML are logged so you can inspect the results in each case.

HTML

The HTML defines two <button> elements for applying different
sanitizers, another button to reset the example, and a <div> element
to inject the string into.

html

<button id="buttonDefault" type="button">Default</button>
<button id="buttonAllowScript" type="button">allowScript</button>

<button id="reload" type="button">Reload</button>
<div id="target">Original content of target element</div>

<pre id="log"></pre>

#log {
  height: 220px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
  margin: 5px;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.textContent += text;
}

if ("Sanitizer" in window) {

First we define the string to sanitize, which will be the same for
all cases. This contains the <script> element and the onclick
handler, both of which are considered XSS-unsafe. We also define the
handler for the reload button.

js

// Define unsafe string of HTML
const unsanitizedString = `
  <div>
    <p>This is a paragraph. <button onclick="alert('You clicked the button!')">Click me</button></p>
    <script src="path/to/a/module.js" type="module"><script>
  </div>
`;

const reload = document.querySelector("#reload");
reload.addEventListener("click", () => document.location.reload());

Next we define the click handler for the button that sets the HTML
with the default sanitizer. This should strip out all unsafe entities
before inserting the string of HTML. Note that you can see exactly
which elements are removed in the Sanitizer() constructor examples.

js

const defaultSanitizerButton = document.querySelector("#buttonDefault");
defaultSanitizerButton.addEventListener("click", () => {
  // Set the content of the element using the default sanitizer
  target.setHTML(unsanitizedString);

  // Log HTML before sanitization and after being injected
  logElement.textContent =
    "Default sanitizer: remove script element and onclick attribute\n\n";
  log(`\nunsanitized: ${unsanitizedString}`);
  log(`\nsanitized: ${target.innerHTML}`);
});

The next click handler sets the target HTML using a custom sanitizer
that allows only <div>, <p>, and <script> elements. Note that because
we're using the setHTML method, <script> will also be removed!

js

const allowScriptButton = document.querySelector("#buttonAllowScript");
allowScriptButton.addEventListener("click", () => {
  // Set the content of the element using a custom sanitizer
  const sanitizer1 = new Sanitizer({
    elements: ["div", "p", "script"],
  });
  target.setHTML(unsanitizedString, { sanitizer: sanitizer1 });

  // Log HTML before sanitization and after being injected
  logElement.textContent =
    "Sanitizer: {elements: ['div', 'p', 'script']}\n Script removed even though allowed\n";
  log(`\nunsanitized: ${unsanitizedString}`);
  log(`\nsanitized: ${target.innerHTML}`);
});

} else {
  log("The HTML Sanitizer API is NOT supported in this browser.");
  // Provide fallback or alternative behavior
}

Results

Click the "Default" and "allowScript" buttons to see the effects of
the default and custom sanitizer, respectively. Note that in both
cases the <script> element and onclick handler are removed, even if
explicitly allowed by the sanitizer.

Specifications

    Specification
HTML Sanitizer API
# dom-element-sethtml

Browser compatibility

Loading...

See also

  * Element.setHTMLUnsafe()
  * ShadowRoot.setHTML() and ShadowRoot.setHTMLUnsafe()
  * Document.parseHTML() and Document.parseHTMLUnsafe()
  * HTML Sanitizer API

Help improve MDN

Was this page helpful to you?
Yes No
Learn how to contribute

This page was last modified on [?]Jun 23, 2025[?] by MDN contributors.

View this page on GitHub * Report a problem with this content
Filter sidebar [                    ]

 1. HTML Sanitizer API Experimental
 2. Element
 3. Instance properties
     1. ariaActiveDescendantElement
     2. ariaAtomic
     3. ariaAutoComplete
     4. ariaBrailleLabel
     5. ariaBrailleRoleDescription
     6. ariaBusy
     7. ariaChecked
     8. ariaColCount
     9. ariaColIndex
    10. ariaColIndexText
    11. ariaColSpan
    12. ariaControlsElements
    13. ariaCurrent
    14. ariaDescribedByElements
    15. ariaDescription
    16. ariaDetailsElements
    17. ariaDisabled
    18. ariaErrorMessageElements
    19. ariaExpanded
    20. ariaFlowToElements
    21. ariaHasPopup
    22. ariaHidden
    23. ariaInvalid
    24. ariaKeyShortcuts
    25. ariaLabel
    26. ariaLabelledByElements
    27. ariaLevel
    28. ariaLive
    29. ariaModal
    30. ariaMultiLine
    31. ariaMultiSelectable
    32. ariaOrientation
    33. ariaOwnsElements
    34. ariaPlaceholder
    35. ariaPosInSet
    36. ariaPressed
    37. ariaReadOnly
    38. ariaRelevant Non-standard
    39. ariaRequired
    40. ariaRoleDescription
    41. ariaRowCount
    42. ariaRowIndex
    43. ariaRowIndexText
    44. ariaRowSpan
    45. ariaSelected
    46. ariaSetSize
    47. ariaSort
    48. ariaValueMax
    49. ariaValueMin
    50. ariaValueNow
    51. ariaValueText
    52. assignedSlot
    53. attributes
    54. childElementCount
    55. children
    56. classList
    57. className
    58. clientHeight
    59. clientLeft
    60. clientTop
    61. clientWidth
    62. currentCSSZoom
    63. elementTiming Experimental
    64. firstElementChild
    65. id
    66. innerHTML
    67. lastElementChild
    68. localName
    69. namespaceURI
    70. nextElementSibling
    71. outerHTML
    72. part
    73. prefix
    74. previousElementSibling
    75. role
    76. scrollHeight
    77. scrollLeft
    78. scrollLeftMax Non-standard
    79. scrollTop
    80. scrollTopMax Non-standard
    81. scrollWidth
    82. shadowRoot
    83. slot
    84. tagName
 4. Instance methods
     1. after()
     2. animate()
     3. append()
     4. ariaNotify() Experimental Non-standard
     5. attachShadow()
     6. before()
     7. checkVisibility()
     8. closest()
     9. computedStyleMap()
    10. getAnimations()
    11. getAttribute()
    12. getAttributeNames()
    13. getAttributeNode()
    14. getAttributeNodeNS()
    15. getAttributeNS()
    16. getBoundingClientRect()
    17. getClientRects()
    18. getElementsByClassName()
    19. getElementsByTagName()
    20. getElementsByTagNameNS()
    21. getHTML()
    22. hasAttribute()
    23. hasAttributeNS()
    24. hasAttributes()
    25. hasPointerCapture()
    26. insertAdjacentElement()
    27. insertAdjacentHTML()
    28. insertAdjacentText()
    29. matches()
    30. moveBefore()
    31. prepend()
    32. querySelector()
    33. querySelectorAll()
    34. releasePointerCapture()
    35. remove()
    36. removeAttribute()
    37. removeAttributeNode()
    38. removeAttributeNS()
    39. replaceChildren()
    40. replaceWith()
    41. requestFullscreen()
    42. requestPointerLock()
    43. scroll()
    44. scrollBy()
    45. scrollIntoView()
    46. scrollIntoViewIfNeeded() Non-standard
    47. scrollTo()
    48. setAttribute()
    49. setAttributeNode()
    50. setAttributeNodeNS()
    51. setAttributeNS()
    52. setCapture() Non-standard Deprecated
    53. setHTML() Experimental
    54. setHTMLUnsafe()
    55. setPointerCapture()
    56. toggleAttribute()
 5. Events
     1. afterscriptexecute Non-standard Deprecated
     2. animationcancel
     3. animationend
     4. animationiteration
     5. animationstart
     6. auxclick
     7. beforeinput
     8. beforematch
     9. beforescriptexecute Non-standard Deprecated
    10. beforexrselect Experimental
    11. blur
    12. click
    13. compositionend
    14. compositionstart
    15. compositionupdate
    16. contentvisibilityautostatechange
    17. contextmenu
    18. copy
    19. cut
    20. dblclick
    21. DOMActivate Deprecated
    22. DOMMouseScroll Non-standard Deprecated
    23. focus
    24. focusin
    25. focusout
    26. fullscreenchange
    27. fullscreenerror
    28. gesturechange Non-standard
    29. gestureend Non-standard
    30. gesturestart Non-standard
    31. gotpointercapture
    32. input
    33. keydown
    34. keypress Deprecated
    35. keyup
    36. lostpointercapture
    37. mousedown
    38. mouseenter
    39. mouseleave
    40. mousemove
    41. mouseout
    42. mouseover
    43. mouseup
    44. mousewheel Non-standard Deprecated
    45. MozMousePixelScroll Non-standard Deprecated
    46. paste
    47. pointercancel
    48. pointerdown
    49. pointerenter
    50. pointerleave
    51. pointermove
    52. pointerout
    53. pointerover
    54. pointerrawupdate
    55. pointerup
    56. scroll
    57. scrollend
    58. scrollsnapchange Experimental
    59. scrollsnapchanging Experimental
    60. securitypolicyviolation
    61. touchcancel
    62. touchend
    63. touchmove
    64. touchstart
    65. transitioncancel
    66. transitionend
    67. transitionrun
    68. transitionstart
    69. webkitmouseforcechanged Non-standard
    70. webkitmouseforcedown Non-standard
    71. webkitmouseforceup Non-standard
    72. webkitmouseforcewillbegin Non-standard
    73. wheel
 6. Inheritance
     1. Node
     2. EventTarget
 7. Related pages for HTML Sanitizer API
     1. Document.parseHTMLUnsafe_static()
     2. Document.parseHTML_static()
     3. Element.setHTML() Experimental
     4. Element.setHTMLUnsafe()
     5. Sanitizer Experimental
     6. SanitizerConfig Experimental
     7. ShadowRoot.setHTML()
     8. ShadowRoot.setHTMLUnsafe()
 8. Guides
     1. Using the HTML Sanitizer API

 

Your blueprint for a better internet.

  *  
  *  
  *  
  *  
  *  

MDN
      + About
      + Blog
      + Mozilla careers
      + Advertise with us
      + MDN Plus
      + Product help

Contribute
      + MDN Community
      + Community resources
      + Writing guidelines
      + MDN Discord
      + MDN on GitHub

Developers
      + Web technologies
      + Learn web development
      + Guides
      + Tutorials
      + Glossary
      + Hacks blog

 

  * Website Privacy Notice
  * Telemetry Settings
  * Legal
  * Community Participation Guidelines

Visit Mozilla Corporation's not-for-profit parent, the Mozilla
Foundation.
Portions of this content are (c)1998-[?]2025[?] by individual mozilla.org
contributors. Content available under a Creative Commons license.