diff --git a/files/en-us/glossary/sanitize/index.md b/files/en-us/glossary/sanitize/index.md
new file mode 100644
index 000000000000000..4a19ce9040a5e95
--- /dev/null
+++ b/files/en-us/glossary/sanitize/index.md
@@ -0,0 +1,19 @@
+---
+title: sanitize
+slug: Glossary/Sanitize
+page-type: glossary-definition
+sidebar: glossarysidebar
+---
+
+Sanitization is the process of removing unsafe features from a string of HTML: for example, {{htmlelement("script")}} tags or inline event handlers.
+
+Since sanitization, like output encoding, is difficult to get right, it is often advised to do this through reputable third-party libraries like [DOMPurify](https://github.com/cure53/DOMPurify).
+
+The [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API) is a web platform API that provides a number of methods for removing unwanted HTML entities from HTML input before it is injected into the DOM. These come in XSS-safe versions (for example, {{domxref("Element.setHTML()")}}) that enforce removal of all unsafe elements and attributes, and potentially unsafe versions (for example, {{domxref("Element.setHTMLUnsafe()")}}) that give developers full control over the HTML entities that are allowed.
+
+## See also
+
+- [XSS sanitization](/en-US/docs/Web/Security/Attacks/XSS#sanitization)
+- [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API)
+- Related glossary terms:
+  - {{Glossary("Cross-site scripting")}}
diff --git a/files/en-us/web/api/characterdata/afterhtml/index.md b/files/en-us/web/api/characterdata/afterhtml/index.md
new file mode 100644
index 000000000000000..18b764cb7d752fa
--- /dev/null
+++ b/files/en-us/web/api/characterdata/afterhtml/index.md
@@ -0,0 +1,151 @@
+---
+title: "CharacterData: afterHTML() method"
+short-title: afterHTML()
+slug: Web/API/CharacterData/afterHTML
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.CharacterData.afterHTML
+---
+
+{{APIRef("DOM")}}
+
+The **`afterHTML()`** method of the {{domxref("CharacterData")}} interface provides an XSS-safe method to parse and sanitize a string of HTML and insert it in the children list of the `CharacterData`'s parent, just after the `CharacterData`. Nothing happens if the node has no parent or the parent is a {{HTMLElement("script")}} element (and similar for SVG {{SVGElement("script")}} elements).
+
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
+
+## Syntax
+
+```js-nolint
+afterHTML(input)
+afterHTML(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A string defining HTML to be sanitized and inserted.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object which defines what elements of the input will be allowed or removed, or the string `"default"` for the default configuration.
+        The method will remove any XSS-unsafe elements and attributes, even if allowed by the sanitizer.
+        If not specified, the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if `options.sanitizer` is passed a:
+    - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+      For example, a configuration that includes both "allowed" and "removed" configuration settings.
+    - string that does not have the value `"default"`.
+    - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}.
+
+## Description
+
+`afterHTML()` drops any elements in the HTML input string that are invalid in the context of the node's parent element (or the shadow host, if the parent is a shadow root), such as a {{htmlelement("col")}} element outside of a {{htmlelement("table")}}.
+
+It then removes any HTML elements and attributes 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. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+
+If no sanitizer is specified in the `options.sanitizer` parameter, `afterHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
+
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
+
+`afterHTML()` can be used instead of {{domxref("Element.setHTML")}} when HTML needs to be inserted after a text or comment node.
+
+It should also be used instead of {{domxref("CharacterData.afterHTMLUnsafe()")}}, 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](/en-US/docs/Web/API/Trusted_Types_API).
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("CharacterData")}}:
+
+| Action                                 | API                                                             | Unsafe API                                                                  |
+| -------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Replace the entire node with this HTML | {{domxref("CharacterData.replaceWithHTML", "replaceWithHTML")}} | {{domxref("CharacterData.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element        | {{domxref("CharacterData.beforeHTML", "beforeHTML")}}           | {{domxref("CharacterData.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML after the element         | {{domxref("CharacterData.afterHTML", "afterHTML")}}             | {{domxref("CharacterData.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+Similar methods, and more, exist on {{domxref("Element")}} (for example {{domxref("Element.afterHTML")}}).
+
+## Examples
+
+> [!NOTE]
+> The [`setHTML()`](/docs/Web/API/Element/setHTML#examples) page includes additional examples, including a live example, which are similar to how `afterHTML()` can be used.
+
+These examples shows some of the ways you can use `afterHTML()` to sanitize and inject a string of HTML.
+
+### Basic usage with default sanitizer
+
+Using the default sanitizer:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const myText = document.getElementById("myText").firstChild;
+
+myText.afterHTML(unsanitizedString);
+// Result is that the following is added after the current text:
+// <p><i>abc</i> def</p>
+```
+
+### Using a custom sanitizer
+
+Using a custom `Sanitizer`, that allows only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements. Note that {{htmlelement("script")}} is XSS-unsafe, so it will be removed anyway:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const myText = document.getElementById("myText").firstChild;
+
+const mySanitizer = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+myText.afterHTML(unsanitizedString, { sanitizer: mySanitizer });
+// Result is that the following is added after the current text:
+// <p> def</p>
+```
+
+### Using a custom sanitizer with `removeElements`
+
+Using a custom `SanitizerConfig`, that removes only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements, as well as other XSS-unsafe elements and attributes that are always removed by this method.
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const myText = document.getElementById("myText").firstChild;
+
+myText.afterHTML(unsanitizedString, {
+  sanitizer: { removeElements: ["i", "script"] },
+});
+// Result is that the following is added after the current text:
+// <p> def</p>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("CharacterData.afterHTMLUnsafe()")}}
+- {{domxref("Element.afterHTML()")}} and {{domxref("Element.afterHTMLUnsafe()")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
+- [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API)
diff --git a/files/en-us/web/api/characterdata/afterhtmlunsafe/index.md b/files/en-us/web/api/characterdata/afterhtmlunsafe/index.md
new file mode 100644
index 000000000000000..f448fcaffc4fdcb
--- /dev/null
+++ b/files/en-us/web/api/characterdata/afterhtmlunsafe/index.md
@@ -0,0 +1,254 @@
+---
+title: "CharacterData: afterHTMLUnsafe() method"
+short-title: afterHTMLUnsafe()
+slug: Web/API/CharacterData/afterHTMLUnsafe
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.CharacterData.afterHTMLUnsafe
+---
+
+{{APIRef("DOM")}}
+
+> [!WARNING]
+> This method parses its input as HTML, writing the result into the DOM.
+> APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the input originally came from an attacker.
+>
+> You can mitigate this risk by always passing `TrustedHTML` objects instead of strings and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+> See [Security considerations](#security_considerations) for more information.
+
+> [!NOTE]
+> {{domxref("Element.afterHTML()")}} should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.
+
+The **`afterHTMLUnsafe()`** method of the {{domxref("CharacterData")}} interface is used to parse HTML input into a {{domxref("DocumentFragment")}}, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and is then inserted into the DOM immediately after the node
+
+The method does nothing if the node has no parent.
+
+Note that the safe variants of these methods (for example, {{domxref("CharacterData.afterHTML")}}) always use the XSS-safe sanitizer, as well as any provided sanitizer parameter. The provided sanitizer is applied in addition to the default XSS-safe sanitizer, whereas with `Unsafe` methods any provided sanitizer is the only sanitizer used.
+
+## Syntax
+
+```js-nolint
+afterHTMLUnsafe(input)
+afterHTMLUnsafe(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A {{domxref("TrustedHTML")}} instance or string defining HTML to be parsed.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object that defines what elements of the input will be allowed or removed.
+        This can also be a string with the value `"default"`, which applies a `Sanitizer` with the (XSS-safe) [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+        If not specified, no sanitizer is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run after inserting. The default is `false`.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if:
+    - `input` is passed a string when [Trusted Types](/en-US/docs/Web/API/Trusted_Types_API) are [enforced by a CSP](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) and no default policy is defined.
+    - `options.sanitizer` is passed a:
+      - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+        For example, a configuration that includes both "allowed" and "removed" configuration settings.
+      - string that does not have the value `"default"`.
+      - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}.
+
+## Description
+
+The **`afterHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element ({{htmlelement("col")}} element outside of a {{htmlelement("table")}}).
+The `DocumentFragment` is then inserted into the DOM immediately after the node.
+
+Unlike with {{domxref("Element.innerHTML")}}, [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in the input will be parsed into the DOM.
+If the string of HTML defines more than one [declarative shadow root](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in a particular shadow host then only the first {{domxref("ShadowRoot")}} is created — subsequent declarations are parsed as `<template>` elements within that shadow root.
+
+`afterHTMLUnsafe()` doesn't perform any sanitization by default, though also does not run scripts by default. If no sanitizer is passed as a parameter, all HTML entities in the input will be injected. It is therefore potentially even less safe than {{domxref("Element.innerHTML")}}, which does not allow {{htmlelement("script")}} execution when parsing.
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("CharacterData")}}:
+
+| Action                                 | API                                                             | Unsafe API                                                                  |
+| -------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Replace the entire node with this HTML | {{domxref("CharacterData.replaceWithHTML", "replaceWithHTML")}} | {{domxref("CharacterData.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element        | {{domxref("CharacterData.beforeHTML", "beforeHTML")}}           | {{domxref("CharacterData.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML after the element         | {{domxref("CharacterData.afterHTML", "afterHTML")}}             | {{domxref("CharacterData.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+Similar methods, and more, exist on {{domxref("Element")}} (for example {{domxref("Element.afterHTMLUnsafe")}}).
+
+### Security considerations
+
+The suffix "Unsafe" in the method name indicates that it does not enforce removal of all XSS-unsafe HTML entities (unlike {{domxref("Element.afterHTML()")}}).
+While it can do so if used with an appropriate sanitizer, it doesn't have to use an effective sanitizer, or any sanitizer at all!
+The method is therefore a possible vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized.
+
+You should mitigate this risk by always passing {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
+This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup (such as {{htmlelement("script")}} elements and event handler attributes), before it is injected.
+
+Using `TrustedHTML` makes it possible to audit and check that sanitization code is effective in just a few places, rather than scattered across all your injection sinks.
+You should not have to pass a sanitizer to the method when using `TrustedHTML`.
+
+If for any reason you can't use `TrustedHTML` (or even better, `afterHTML()`) then the next safest option is to use `afterHTMLUnsafe()` with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+
+### When should `afterHTMLUnsafe()` be used?
+
+`afterHTMLUnsafe()` should almost never be used if {{domxref("CharacterData.afterHTML()")}} is available, because there are very few (if any) cases where user-provided HTML input should need to include XSS-unsafe elements.
+Not only is `afterHTML()` safe, but it avoids having to consider trusted types.
+
+Using `afterHTMLUnsafe()` might be appropriate if:
+
+- You can't use `afterHTML()` or trusted types (for whatever reason) and you want to have the safest possible filtering.
+  In this case you might use `afterHTMLUnsafe()` with the default {{domxref("Sanitizer")}} to filter all XSS-unsafe elements.
+- You can't use `afterHTML()` and the input might contain declarative shadow roots, so you can't use {{domxref("Element.innerHTML")}}.
+- You have an edge case where you have to allow HTML input that includes a known set of unsafe HTML entities.
+
+  You can't use `afterHTML()` in this case, because it strips all unsafe entities.
+  You could use `afterHTMLUnsafe()` without a sanitizer or `innerHTML`, but that would allow all unsafe entities.
+
+  A better option here is to call `afterHTMLUnsafe()` with a sanitizer that allows just those dangerous elements and attributes we actually need.
+  While this is still unsafe, it is safer than allowing all of them.
+
+For the last point, consider a situation where your code relies on being able to use unsafe `onclick` handlers.
+The following code shows the effect of the different methods and sanitizers for this case.
+
+```js
+const myText = document.querySelector("#myText").firstChild;
+
+const input = "<img src=x onclick=alert('onclick') onerror=alert('onerror')>";
+
+// Safe - removes all XSS-unsafe entities.
+myText.afterHTML(input);
+
+// Removes no event handler attributes
+myText.afterHTMLUnsafe(input);
+
+// Safe - removes all XSS-unsafe entities.
+const configSafe = new Sanitizer();
+myText.afterHTMLUnsafe(input, { sanitizer: configSafe });
+
+// Removes all XSS-unsafe entities except `onclick`
+const configLessSafe = new Sanitizer();
+configLessSafe.allowAttribute("onclick");
+myText.afterHTMLUnsafe(input, { sanitizer: configLessSafe });
+```
+
+## Examples
+
+> [!NOTE]
+> The [`setHTMLUnsafe()`](/docs/Web/API/Element/setHTMLUnsafe#examples) page includes additional examples, including a live example, which are similar to how `afterHTMLUnsafe()` can be used.
+
+### afterHTMLUnsafe() with Trusted Types
+
+To mitigate the risk of XSS, we'll first create a `TrustedHTML` object from the string containing the HTML, and then pass that object to `afterHTMLUnsafe()`.
+Since trusted types are not yet supported on all browsers, we define the [trusted types tinyfill](/en-US/docs/Web/API/Trusted_Types_API#trusted_types_tinyfill).
+This acts as a transparent replacement for the Trusted Types JavaScript API:
+
+```js
+if (typeof trustedTypes === "undefined")
+  trustedTypes = { createPolicy: (n, rules) => rules };
+```
+
+Next we create a {{domxref("TrustedTypePolicy")}} that defines a {{domxref("TrustedTypePolicy/createHTML", "createHTML()")}} for transforming an input string into {{domxref("TrustedHTML")}} instances.
+Commonly implementations of `createHTML()` use a library such as [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the input as shown below:
+
+```js
+const policy = trustedTypes.createPolicy("my-policy", {
+  createHTML: (input) => DOMPurify.sanitize(input),
+});
+```
+
+Then we use this `policy` object to create a `TrustedHTML` object from the potentially unsafe input string:
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+// Create a TrustedHTML instance using the policy
+const trustedHTML = policy.createHTML(untrustedString);
+```
+
+Now that we have `trustedHTML`, the code below shows how you can use it with `afterHTMLUnsafe()`.
+The input has been through the transformation function, so we don't pass a sanitizer to the method.
+
+```js
+// Get the myText Element with id "myText"
+const myText = document.getElementById("myText").firstChild;
+
+// afterHTMLUnsafe() with no sanitizer
+myText.afterHTMLUnsafe(trustedHTML);
+```
+
+### Using afterHTMLUnsafe() without Trusted Types
+
+This example demonstrates the case where we aren't using trusted types, so we'll be passing sanitizer arguments.
+
+The code creates an untrusted string and shows a number of ways a sanitizer can be passed to the method.
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+
+// Get the myText Element with id "myText"
+const myText = document.getElementById("myText").firstChild;
+
+// Define custom Sanitizer and use in afterHTMLUnsafe()
+// This allows only elements: div, p, button, script
+const sanitizer1 = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+myText.afterHTMLUnsafe(untrustedString, { sanitizer: sanitizer1 });
+
+// Define custom SanitizerConfig within afterHTMLUnsafe()
+// Removes the <script> element but allows other potentially unsafe entities.
+myText.afterHTMLUnsafe(untrustedString, {
+  sanitizer: { removeElements: ["script"] },
+});
+```
+
+### Using afterHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString = "<em>Other content</em>";
+
+// Get the myText Element with id "myText"
+const myText = document.getElementById("myText").firstChild;
+
+// No sanitizer is passed, so the <script> element is kept
+// and also executes the script after insertion.
+myText.afterHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("CharacterData.afterHTML()")}}
+- {{domxref("Element.afterHTML()")}} and {{domxref("Element.afterHTMLUnsafe()")}}
+- {{domxref("Element.setHTMLUnsafe()")}}
+- {{domxref("Element.innerHTML")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
diff --git a/files/en-us/web/api/characterdata/beforehtml/index.md b/files/en-us/web/api/characterdata/beforehtml/index.md
new file mode 100644
index 000000000000000..f280f9a81be9333
--- /dev/null
+++ b/files/en-us/web/api/characterdata/beforehtml/index.md
@@ -0,0 +1,150 @@
+---
+title: "CharacterData: beforeHTML() method"
+short-title: beforeHTML()
+slug: Web/API/CharacterData/beforeHTML
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.CharacterData.beforeHTML
+---
+
+{{APIRef("DOM")}}
+
+The **`beforeHTML()`** method of the {{domxref("CharacterData")}} interface provides an XSS-safe method to parse and sanitize a string of HTML and insert it in the children list of the `CharacterData`'s parent, just before the `CharacterData`. Nothing happens if the node has no parent or the parent is a {{HTMLElement("script")}} element (and similar for SVG {{SVGElement("script")}} elements).
+
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
+
+## Syntax
+
+```js-nolint
+beforeHTML(input)
+beforeHTML(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A string defining HTML to be sanitized and inserted.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object which defines what elements of the input will be allowed or removed, or the string `"default"` for the default configuration.
+        The method will remove any XSS-unsafe elements and attributes, even if allowed by the sanitizer.
+        If not specified, the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if `options.sanitizer` is passed a:
+    - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+      For example, a configuration that includes both "allowed" and "removed" configuration settings.
+    - string that does not have the value `"default"`.
+    - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}.
+
+## Description
+
+`beforeHTML()` drops any elements in the HTML input string that are invalid in the context of the node's parent element (or the shadow host, if the parent is a shadow root), such as a {{htmlelement("col")}} element outside of a {{htmlelement("table")}}.
+
+It then removes any HTML elements and attributes 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. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+
+If no sanitizer is specified in the `options.sanitizer` parameter, `beforeHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
+
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
+
+`beforeHTML()` can be used instead of {{domxref("Element.setHTML")}} when HTML needs to be inserted before a text or comment node.
+
+It should also be used instead of {{domxref("CharacterData.beforeHTMLUnsafe()")}}, 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](/en-US/docs/Web/API/Trusted_Types_API).
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("CharacterData")}}:
+
+| Action                                 | API                                                             | Unsafe API                                                                  |
+| -------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Replace the entire node with this HTML | {{domxref("CharacterData.replaceWithHTML", "replaceWithHTML")}} | {{domxref("CharacterData.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element        | {{domxref("CharacterData.beforeHTML", "beforeHTML")}}           | {{domxref("CharacterData.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML after the element         | {{domxref("CharacterData.afterHTML", "afterHTML")}}             | {{domxref("CharacterData.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+Similar methods, and more, exist on {{domxref("Element")}} (for example {{domxref("Element.beforeHTML")}})
+
+## Examples
+
+> [!NOTE]
+> The [`setHTML()`](/docs/Web/API/Element/setHTML#examples) page includes additional examples, including a live example, which are similar to how `beforeHTML()` can be used.
+
+These examples shows some of the ways you can use `beforeHTML()` to sanitize and inject a string of HTML.
+
+### Basic usage with default sanitizer
+
+Using the default sanitizer:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const myText = document.getElementById("myText").firstChild;
+
+myText.beforeHTML(unsanitizedString);
+// Result is that the following is added before the current text:
+// <p><i>abc</i> def</p>
+```
+
+### Using a custom sanitizer
+
+Using a custom `Sanitizer`, that allows only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements. Note that {{htmlelement("script")}} is XSS-unsafe, so it will be removed anyway:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const myText = document.getElementById("myText").firstChild;
+
+const mySanitizer = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+myText.beforeHTML(unsanitizedString, { sanitizer: mySanitizer });
+// Result is that the following is added before the current text:
+// <p> def</p>
+```
+
+### Using a custom sanitizer with `removeElements`
+
+Using a custom `SanitizerConfig`, that removes only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements, as well as other XSS-unsafe elements and attributes that are always removed by this method.
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const myText = document.getElementById("myText").firstChild;
+
+myText.beforeHTML(unsanitizedString, {
+  sanitizer: { removeElements: ["i", "script"] },
+});
+// Result is that the following is added before the current text:
+// <p> def</p>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("CharacterData.beforeHTMLUnsafe()")}}
+- {{domxref("Element.beforeHTML()")}} and {{domxref("Element.beforeHTMLUnsafe()")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
+- [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API)
diff --git a/files/en-us/web/api/characterdata/beforehtmlunsafe/index.md b/files/en-us/web/api/characterdata/beforehtmlunsafe/index.md
new file mode 100644
index 000000000000000..a9d44f11abb8e93
--- /dev/null
+++ b/files/en-us/web/api/characterdata/beforehtmlunsafe/index.md
@@ -0,0 +1,254 @@
+---
+title: "CharacterData: beforeHTMLUnsafe() method"
+short-title: beforeHTMLUnsafe()
+slug: Web/API/CharacterData/beforeHTMLUnsafe
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.CharacterData.beforeHTMLUnsafe
+---
+
+{{APIRef("DOM")}}
+
+> [!WARNING]
+> This method parses its input as HTML, writing the result into the DOM.
+> APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the input originally came from an attacker.
+>
+> You can mitigate this risk by always passing `TrustedHTML` objects instead of strings and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+> See [Security considerations](#security_considerations) for more information.
+
+> [!NOTE]
+> {{domxref("Element.beforeHTML()")}} should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.
+
+The **`beforeHTMLUnsafe()`** method of the {{domxref("CharacterData")}} interface is used to parse HTML input into a {{domxref("DocumentFragment")}}, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and is then inserted into the DOM immediately before the node.
+
+The method does nothing if the node has no parent.
+
+Note that the safe variants of these methods (for example, {{domxref("CharacterData.beforeHTML")}}) always use the XSS-safe sanitizer, as well as any provided sanitizer parameter. The provided sanitizer is applied in addition to the default XSS-safe sanitizer, whereas with `Unsafe` methods any provided sanitizer is the only sanitizer used.
+
+## Syntax
+
+```js-nolint
+beforeHTMLUnsafe(input)
+beforeHTMLUnsafe(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A {{domxref("TrustedHTML")}} instance or string defining HTML to be parsed.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object that defines what elements of the input will be allowed or removed.
+        This can also be a string with the value `"default"`, which applies a `Sanitizer` with the (XSS-safe) [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+        If not specified, no sanitizer is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run after inserting. The default is `false`.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if:
+    - `input` is passed a string when [Trusted Types](/en-US/docs/Web/API/Trusted_Types_API) are [enforced by a CSP](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) and no default policy is defined.
+    - `options.sanitizer` is passed a:
+      - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+        For example, a configuration that includes both "allowed" and "removed" configuration settings.
+      - string that does not have the value `"default"`.
+      - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}.
+
+## Description
+
+The **`beforeHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element ({{htmlelement("col")}} element outside of a {{htmlelement("table")}}).
+The `DocumentFragment` is then used to insert into the DOM immediately after the node.
+
+Unlike with {{domxref("Element.innerHTML")}}, [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in the input will be parsed into the DOM.
+If the string of HTML defines more than one [declarative shadow root](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in a particular shadow host then only the first {{domxref("ShadowRoot")}} is created — subsequent declarations are parsed as `<template>` elements within that shadow root.
+
+`beforeHTMLUnsafe()` doesn't perform any sanitization by default, though also does not run scripts by default. If no sanitizer is passed as a parameter, all HTML entities in the input will be injected. It is therefore potentially even less safe than {{domxref("Element.innerHTML")}}, which does not allow {{htmlelement("script")}} execution when parsing.
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("CharacterData")}}:
+
+| Action                                 | API                                                             | Unsafe API                                                                  |
+| -------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Replace the entire node with this HTML | {{domxref("CharacterData.replaceWithHTML", "replaceWithHTML")}} | {{domxref("CharacterData.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element        | {{domxref("CharacterData.beforeHTML", "beforeHTML")}}           | {{domxref("CharacterData.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML after the element         | {{domxref("CharacterData.afterHTML", "afterHTML")}}             | {{domxref("CharacterData.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+Similar methods, and more, exist on {{domxref("Element")}} (for example {{domxref("Element.beforeHTMLUnsafe")}}).
+
+### Security considerations
+
+The suffix "Unsafe" in the method name indicates that it does not enforce removal of all XSS-unsafe HTML entities (unlike {{domxref("Element.beforeHTML()")}}).
+While it can do so if used with an appropriate sanitizer, it doesn't have to use an effective sanitizer, or any sanitizer at all!
+The method is therefore a possible vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized.
+
+You should mitigate this risk by always passing {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
+This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup (such as {{htmlelement("script")}} elements and event handler attributes), before it is injected.
+
+Using `TrustedHTML` makes it possible to audit and check that sanitization code is effective in just a few places, rather than scattered across all your injection sinks.
+You should not have to pass a sanitizer to the method when using `TrustedHTML`.
+
+If for any reason you can't use `TrustedHTML` (or even better, `beforeHTML()`) then the next safest option is to use `beforeHTMLUnsafe()` with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+
+### When should `beforeHTMLUnsafe()` be used?
+
+`beforeHTMLUnsafe()` should almost never be used if {{domxref("CharacterData.beforeHTML()")}} is available, because there are very few (if any) cases where user-provided HTML input should need to include XSS-unsafe elements.
+Not only is `beforeHTML()` safe, but it avoids having to consider trusted types.
+
+Using `beforeHTMLUnsafe()` might be appropriate if:
+
+- You can't use `beforeHTML()` or trusted types (for whatever reason) and you want to have the safest possible filtering.
+  In this case you might use `beforeHTMLUnsafe()` with the default {{domxref("Sanitizer")}} to filter all XSS-unsafe elements.
+- You can't use `beforeHTML()` and the input might contain declarative shadow roots, so you can't use {{domxref("Element.innerHTML")}}.
+- You have an edge case where you have to allow HTML input that includes a known set of unsafe HTML entities.
+
+  You can't use `beforeHTML()` in this case, because it strips all unsafe entities.
+  You could use `beforeHTMLUnsafe()` without a sanitizer or `innerHTML`, but that would allow all unsafe entities.
+
+  A better option here is to call `beforeHTMLUnsafe()` with a sanitizer that allows just those dangerous elements and attributes we actually need.
+  While this is still unsafe, it is safer than allowing all of them.
+
+For the last point, consider a situation where your code relies on being able to use unsafe `onclick` handlers.
+The following code shows the effect of the different methods and sanitizers for this case.
+
+```js
+const myText = document.querySelector("#myText").firstChild;
+
+const input = "<img src=x onclick=alert('onclick') onerror=alert('onerror')>";
+
+// Safe - removes all XSS-unsafe entities.
+myText.beforeHTML(input);
+
+// Removes no event handler attributes
+myText.beforeHTMLUnsafe(input);
+
+// Safe - removes all XSS-unsafe entities.
+const configSafe = new Sanitizer();
+myText.beforeHTMLUnsafe(input, { sanitizer: configSafe });
+
+// Removes all XSS-unsafe entities except `onclick`
+const configLessSafe = new Sanitizer();
+configLessSafe.allowAttribute("onclick");
+myText.beforeHTMLUnsafe(input, { sanitizer: configLessSafe });
+```
+
+## Examples
+
+> [!NOTE]
+> The [`setHTMLUnsafe()`](/docs/Web/API/Element/setHTMLUnsafe#examples) page includes additional examples, including a live example, which are similar to how `beforeHTMLUnsafe()` can be used.
+
+### beforeHTMLUnsafe() with Trusted Types
+
+To mitigate the risk of XSS, we'll first create a `TrustedHTML` object from the string containing the HTML, and then pass that object to `beforeHTMLUnsafe()`.
+Since trusted types are not yet supported on all browsers, we define the [trusted types tinyfill](/en-US/docs/Web/API/Trusted_Types_API#trusted_types_tinyfill).
+This acts as a transparent replacement for the Trusted Types JavaScript API:
+
+```js
+if (typeof trustedTypes === "undefined")
+  trustedTypes = { createPolicy: (n, rules) => rules };
+```
+
+Next we create a {{domxref("TrustedTypePolicy")}} that defines a {{domxref("TrustedTypePolicy/createHTML", "createHTML()")}} for transforming an input string into {{domxref("TrustedHTML")}} instances.
+Commonly implementations of `createHTML()` use a library such as [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the input as shown below:
+
+```js
+const policy = trustedTypes.createPolicy("my-policy", {
+  createHTML: (input) => DOMPurify.sanitize(input),
+});
+```
+
+Then we use this `policy` object to create a `TrustedHTML` object from the potentially unsafe input string:
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+// Create a TrustedHTML instance using the policy
+const trustedHTML = policy.createHTML(untrustedString);
+```
+
+Now that we have `trustedHTML`, the code below shows how you can use it with `beforeHTMLUnsafe()`.
+The input has been through the transformation function, so we don't pass a sanitizer to the method.
+
+```js
+// Get the myText Element with id "myText"
+const myText = document.getElementById("myText").firstChild;
+
+// beforeHTMLUnsafe() with no sanitizer
+myText.beforeHTMLUnsafe(trustedHTML);
+```
+
+### Using beforeHTMLUnsafe() without Trusted Types
+
+This example demonstrates the case where we aren't using trusted types, so we'll be passing sanitizer arguments.
+
+The code creates an untrusted string and shows a number of ways a sanitizer can be passed to the method.
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+
+// Get the myText Element with id "myText"
+const myText = document.getElementById("myText").firstChild;
+
+// Define custom Sanitizer and use in beforeHTMLUnsafe()
+// This allows only elements: div, p, button, script
+const sanitizer1 = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+myText.beforeHTMLUnsafe(untrustedString, { sanitizer: sanitizer1 });
+
+// Define custom SanitizerConfig within beforeHTMLUnsafe()
+// Removes the <script> element but allows other potentially unsafe entities.
+myText.beforeHTMLUnsafe(untrustedString, {
+  sanitizer: { removeElements: ["script"] },
+});
+```
+
+### Using beforeHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString = "<em>Other content</em>";
+
+// Get the myText Element with id "myText"
+const myText = document.getElementById("myText").firstChild;
+
+// No sanitizer is passed, so the <script> element is kept
+// and also executes the script after insertion.
+myText.beforeHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("CharacterData.beforeHTML()")}}
+- {{domxref("Element.beforeHTML()")}} and {{domxref("Element.beforeHTMLUnsafe()")}}
+- {{domxref("Element.setHTMLUnsafe()")}}
+- {{domxref("Element.innerHTML")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
diff --git a/files/en-us/web/api/characterdata/replacewithhtml/index.md b/files/en-us/web/api/characterdata/replacewithhtml/index.md
new file mode 100644
index 000000000000000..8cd5ecc64bf2fd5
--- /dev/null
+++ b/files/en-us/web/api/characterdata/replacewithhtml/index.md
@@ -0,0 +1,150 @@
+---
+title: "CharacterData: replaceWithHTML() method"
+short-title: replaceWithHTML()
+slug: Web/API/CharacterData/replaceWithHTML
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.CharacterData.replaceWithHTML
+---
+
+{{APIRef("DOM")}}
+
+The **`replaceWithHTML()`** method of the {{domxref("CharacterData")}} interface provides an XSS-safe method to parse and sanitize a string of HTML and use it to replace the existing `CharacterData`. Nothing happens if the node has no parent or the parent is a {{HTMLElement("script")}} element (and similar for SVG {{SVGElement("script")}} elements).
+
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
+
+## Syntax
+
+```js-nolint
+replaceWithHTML(input)
+replaceWithHTML(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A string defining HTML to be sanitized and replace the element.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object which defines what elements of the input will be allowed or removed, or the string `"default"` for the default configuration.
+        The method will remove any XSS-unsafe elements and attributes, even if allowed by the sanitizer.
+        If not specified, the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if `options.sanitizer` is passed a:
+    - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+      For example, a configuration that includes both "allowed" and "removed" configuration settings.
+    - string that does not have the value `"default"`.
+    - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}.
+
+## Description
+
+`replaceWithHTML()` drops any elements in the HTML input string that are invalid in the context of the node's parent element (or the shadow host, if the parent is a shadow root), such as a {{htmlelement("col")}} element outside of a {{htmlelement("table")}}.
+
+It then removes any HTML elements and attributes 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. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+
+If no sanitizer is specified in the `options.sanitizer` parameter, `replaceWithHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
+
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
+
+`replaceWithHTML()` can be used instead of {{domxref("Element.setHTML")}} when the whole node needs to be replaced.
+
+It should also be used instead of {{domxref("CharacterData.replaceWithHTMLUnsafe()")}}, 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](/en-US/docs/Web/API/Trusted_Types_API).
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("CharacterData")}}:
+
+| Action                                 | API                                                             | Unsafe API                                                                  |
+| -------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Replace the entire node with this HTML | {{domxref("CharacterData.replaceWithHTML", "replaceWithHTML")}} | {{domxref("CharacterData.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element        | {{domxref("CharacterData.beforeHTML", "beforeHTML")}}           | {{domxref("CharacterData.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML after the element         | {{domxref("CharacterData.afterHTML", "afterHTML")}}             | {{domxref("CharacterData.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+Similar methods, and more, exist on `Element`(for example {{domxref("Element.replaceWithHTML")}}).
+
+## Examples
+
+> [!NOTE]
+> The [`setHTML()`](/docs/Web/API/Element/setHTML#examples) page includes additional examples, including a live example, which are similar to how `replaceWithHTML()` can be used.
+
+These examples shows some of the ways you can use `replaceWithHTML()` to sanitize and inject a string of HTML.
+
+### Basic usage with default sanitizer
+
+Using the default sanitizer:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const myText = document.getElementById("myText").firstChild;
+
+myText.replaceWithHTML(unsanitizedString);
+// Result is that the following replaces the current text:
+// <p><i>abc</i> def</p>
+```
+
+### Using a custom sanitizer
+
+Using a custom `Sanitizer`, that allows only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements. Note that {{htmlelement("script")}} is XSS-unsafe, so it will be removed anyway:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const myText = document.getElementById("myText").firstChild;
+
+const mySanitizer = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+myText.replaceWithHTML(unsanitizedString, { sanitizer: mySanitizer });
+// Result is that the following replaces the current text:
+// <p> def</p>
+```
+
+### Using a custom sanitizer with `removeElements`
+
+Using a custom `SanitizerConfig`, that removes only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements, as well as other XSS-unsafe elements and attributes that are always removed by this method.
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const myText = document.getElementById("myText").firstChild;
+
+myText.replaceWithHTML(unsanitizedString, {
+  sanitizer: { removeElements: ["i", "script"] },
+});
+// Result is that the following replaces the current text:
+// <p> def</p>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("CharacterData.replaceWithHTMLUnsafe()")}}
+- {{domxref("Element.replaceWithHTML()")}} and {{domxref("Element.replaceWithHTMLUnsafe()")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
+- [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API)
diff --git a/files/en-us/web/api/characterdata/replacewithhtmlunsafe/index.md b/files/en-us/web/api/characterdata/replacewithhtmlunsafe/index.md
new file mode 100644
index 000000000000000..a48ad3723dde15f
--- /dev/null
+++ b/files/en-us/web/api/characterdata/replacewithhtmlunsafe/index.md
@@ -0,0 +1,254 @@
+---
+title: "CharacterData: replaceWithHTMLUnsafe() method"
+short-title: replaceWithHTMLUnsafe()
+slug: Web/API/CharacterData/replaceWithHTMLUnsafe
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.CharacterData.replaceWithHTMLUnsafe
+---
+
+{{APIRef("DOM")}}
+
+> [!WARNING]
+> This method parses its input as HTML, writing the result into the DOM.
+> APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the input originally came from an attacker.
+>
+> You can mitigate this risk by always passing `TrustedHTML` objects instead of strings and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+> See [Security considerations](#security_considerations) for more information.
+
+> [!NOTE]
+> {{domxref("Element.replaceWithHTML()")}} should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.
+
+The **`replaceWithHTMLUnsafe()`** method of the {{domxref("CharacterData")}} interface is used to parse HTML input into a {{domxref("DocumentFragment")}}, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and then using it to replace the node in the DOM.
+
+The method does nothing if the node has no parent.
+
+Note that the safe variants of these methods (for example, {{domxref("CharacterData.replaceWithHTML")}}) always use the XSS-safe sanitizer, as well as any provided sanitizer parameter. The provided sanitizer is applied in addition to the default XSS-safe sanitizer, whereas with `Unsafe` methods any provided sanitizer is the only sanitizer used.
+
+## Syntax
+
+```js-nolint
+replaceWithHTMLUnsafe(input)
+replaceWithHTMLUnsafe(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A {{domxref("TrustedHTML")}} instance or string defining HTML to be parsed.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object that defines what elements of the input will be allowed or removed.
+        This can also be a string with the value `"default"`, which applies a `Sanitizer` with the (XSS-safe) [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+        If not specified, no sanitizer is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run after inserting. The default is `false`.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if:
+    - `input` is passed a string when [Trusted Types](/en-US/docs/Web/API/Trusted_Types_API) are [enforced by a CSP](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) and no default policy is defined.
+    - `options.sanitizer` is passed a:
+      - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+        For example, a configuration that includes both "allowed" and "removed" configuration settings.
+      - string that does not have the value `"default"`.
+      - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}.
+
+## Description
+
+The **`replaceWithHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element ({{htmlelement("col")}} element outside of a {{htmlelement("table")}}).
+The `DocumentFragment` is then used to replace the node in the DOM.
+
+Unlike with {{domxref("Element.innerHTML")}}, [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in the input will be parsed into the DOM.
+If the string of HTML defines more than one [declarative shadow root](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in a particular shadow host then only the first {{domxref("ShadowRoot")}} is created — subsequent declarations are parsed as `<template>` elements within that shadow root.
+
+`replaceWithHTMLUnsafe()` doesn't perform any sanitization by default, though also does not run scripts by default. If no sanitizer is passed as a parameter, all HTML entities in the input will be injected. It is therefore potentially even less safe than {{domxref("Element.innerHTML")}}, which does not allow {{htmlelement("script")}} execution when parsing.
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("CharacterData")}}:
+
+| Action                                 | API                                                             | Unsafe API                                                                  |
+| -------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Replace the entire node with this HTML | {{domxref("CharacterData.replaceWithHTML", "replaceWithHTML")}} | {{domxref("CharacterData.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element        | {{domxref("CharacterData.beforeHTML", "beforeHTML")}}           | {{domxref("CharacterData.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML after the element         | {{domxref("CharacterData.afterHTML", "afterHTML")}}             | {{domxref("CharacterData.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+Similar methods, and more, exist on {{domxref("Element")}} (for example {{domxref("Element.replaceWithHTMLUnsafe")}}).
+
+### Security considerations
+
+The suffix "Unsafe" in the method name indicates that it does not enforce removal of all XSS-unsafe HTML entities (unlike {{domxref("Element.replaceWithHTML()")}}).
+While it can do so if used with an appropriate sanitizer, it doesn't have to use an effective sanitizer, or any sanitizer at all!
+The method is therefore a possible vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized.
+
+You should mitigate this risk by always passing {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
+This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup (such as {{htmlelement("script")}} elements and event handler attributes), before it is injected.
+
+Using `TrustedHTML` makes it possible to audit and check that sanitization code is effective in just a few places, rather than scattered across all your injection sinks.
+You should not have to pass a sanitizer to the method when using `TrustedHTML`.
+
+If for any reason you can't use `TrustedHTML` (or even better, `replaceWithHTML()`) then the next safest option is to use `replaceWithHTMLUnsafe()` with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+
+### When should `replaceWithHTMLUnsafe()` be used?
+
+`replaceWithHTMLUnsafe()` should almost never be used if {{domxref("CharacterData.replaceWithHTML()")}} is available, because there are very few (if any) cases where user-provided HTML input should need to include XSS-unsafe elements.
+Not only is `replaceWithHTML()` safe, but it avoids having to consider trusted types.
+
+Using `replaceWithHTMLUnsafe()` might be appropriate if:
+
+- You can't use `replaceWithHTML()` or trusted types (for whatever reason) and you want to have the safest possible filtering.
+  In this case you might use `replaceWithHTMLUnsafe()` with the default {{domxref("Sanitizer")}} to filter all XSS-unsafe elements.
+- You can't use `replaceWithHTML()` and the input might contain declarative shadow roots, so you can't use {{domxref("Element.innerHTML")}}.
+- You have an edge case where you have to allow HTML input that includes a known set of unsafe HTML entities.
+
+  You can't use `replaceWithHTML()` in this case, because it strips all unsafe entities.
+  You could use `replaceWithHTMLUnsafe()` without a sanitizer or `innerHTML`, but that would allow all unsafe entities.
+
+  A better option here is to call `replaceWithHTMLUnsafe()` with a sanitizer that allows just those dangerous elements and attributes we actually need.
+  While this is still unsafe, it is safer than allowing all of them.
+
+For the last point, consider a situation where your code relies on being able to use unsafe `onclick` handlers.
+The following code shows the effect of the different methods and sanitizers for this case.
+
+```js
+const myText = document.querySelector("#myText").firstChild;
+
+const input = "<img src=x onclick=alert('onclick') onerror=alert('onerror')>";
+
+// Safe - removes all XSS-unsafe entities.
+myText.replaceWithHTML(input);
+
+// Removes no event handler attributes
+myText.replaceWithHTMLUnsafe(input);
+
+// Safe - removes all XSS-unsafe entities.
+const configSafe = new Sanitizer();
+myText.replaceWithHTMLUnsafe(input, { sanitizer: configSafe });
+
+// Removes all XSS-unsafe entities except `onclick`
+const configLessSafe = new Sanitizer();
+configLessSafe.allowAttribute("onclick");
+myText.replaceWithHTMLUnsafe(input, { sanitizer: configLessSafe });
+```
+
+## Examples
+
+> [!NOTE]
+> The [`setHTMLUnsafe()`](/docs/Web/API/Element/setHTMLUnsafe#examples) page includes additional examples, including a live example, which are similar to how `replaceWithHTMLUnsafe()` can be used.
+
+### replaceWithHTMLUnsafe() with Trusted Types
+
+To mitigate the risk of XSS, we'll first create a `TrustedHTML` object from the string containing the HTML, and then pass that object to `replaceWithHTMLUnsafe()`.
+Since trusted types are not yet supported on all browsers, we define the [trusted types tinyfill](/en-US/docs/Web/API/Trusted_Types_API#trusted_types_tinyfill).
+This acts as a transparent replacement for the Trusted Types JavaScript API:
+
+```js
+if (typeof trustedTypes === "undefined")
+  trustedTypes = { createPolicy: (n, rules) => rules };
+```
+
+Next we create a {{domxref("TrustedTypePolicy")}} that defines a {{domxref("TrustedTypePolicy/createHTML", "createHTML()")}} for transforming an input string into {{domxref("TrustedHTML")}} instances.
+Commonly implementations of `createHTML()` use a library such as [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the input as shown below:
+
+```js
+const policy = trustedTypes.createPolicy("my-policy", {
+  createHTML: (input) => DOMPurify.sanitize(input),
+});
+```
+
+Then we use this `policy` object to create a `TrustedHTML` object from the potentially unsafe input string:
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+// Create a TrustedHTML instance using the policy
+const trustedHTML = policy.createHTML(untrustedString);
+```
+
+Now that we have `trustedHTML`, the code below shows how you can use it with `replaceWithHTMLUnsafe()`.
+The input has been through the transformation function, so we don't pass a sanitizer to the method.
+
+```js
+// Get the myText Element with id "myText"
+const myText = document.getElementById("myText").firstChild;
+
+// replaceWithHTMLUnsafe() with no sanitizer
+myText.replaceWithHTMLUnsafe(trustedHTML);
+```
+
+### Using replaceWithHTMLUnsafe() without Trusted Types
+
+This example demonstrates the case where we aren't using trusted types, so we'll be passing sanitizer arguments.
+
+The code creates an untrusted string and shows a number of ways a sanitizer can be passed to the method.
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+
+// Get the myText Element with id "myText"
+const myText = document.getElementById("myText").firstChild;
+
+// Define custom Sanitizer and use in replaceWithHTMLUnsafe()
+// This allows only elements: div, p, button, script
+const sanitizer1 = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+myText.replaceWithHTMLUnsafe(untrustedString, { sanitizer: sanitizer1 });
+
+// Define custom SanitizerConfig within replaceWithHTMLUnsafe()
+// Removes the <script> element but allows other potentially unsafe entities.
+myText.replaceWithHTMLUnsafe(untrustedString, {
+  sanitizer: { removeElements: ["script"] },
+});
+```
+
+### Using replaceWithHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString = "<em>Other content</em>";
+
+// Get the myText Element with id "myText"
+const myText = document.getElementById("myText").firstChild;
+
+// No sanitizer is passed, so the <script> element is kept
+// and also executes the script after insertion.
+myText.replaceWithHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("CharacterData.replaceWithHTML()")}}
+- {{domxref("Element.replaceWithHTML()")}} and {{domxref("Element.replaceWithHTMLUnsafe()")}}
+- {{domxref("Element.setHTMLUnsafe()")}}
+- {{domxref("Element.innerHTML")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
diff --git a/files/en-us/web/api/document/parsehtml_static/index.md b/files/en-us/web/api/document/parsehtml_static/index.md
index 625c7a8b5724d49..f62ad767f9acf7b 100644
--- a/files/en-us/web/api/document/parsehtml_static/index.md
+++ b/files/en-us/web/api/document/parsehtml_static/index.md
@@ -51,7 +51,7 @@ The resulting `Document` will have a [content type](/en-US/docs/Web/API/Document
 If no sanitizer is specified in the `options.sanitizer` parameter, `parseHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
 This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
 
-A custom `Sanitizer` or `SanitizerConfig` can be specified to choose which elements, attributes, and comments are allowed or removed.
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
 
 The input HTML may include [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom).
diff --git a/files/en-us/web/api/element/afterhtml/index.md b/files/en-us/web/api/element/afterhtml/index.md
new file mode 100644
index 000000000000000..19d540dd00cf4f3
--- /dev/null
+++ b/files/en-us/web/api/element/afterhtml/index.md
@@ -0,0 +1,151 @@
+---
+title: "Element: afterHTML() method"
+short-title: afterHTML()
+slug: Web/API/Element/afterHTML
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.Element.afterHTML
+---
+
+{{APIRef("DOM")}}
+
+The **`afterHTML()`** method of the {{domxref("Element")}} interface provides an XSS-safe method to parse and sanitize a string of HTML and insert it in the children list of the `Element`'s parent, just after the `Element`. Nothing happens if the node has no parent or the parent is a {{HTMLElement("script")}} element (and similar for SVG {{SVGElement("script")}} elements).
+
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
+
+## Syntax
+
+```js-nolint
+afterHTML(input)
+afterHTML(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A string defining HTML to be sanitized and inserted.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object which defines what elements of the input will be allowed or removed, or the string `"default"` for the default configuration.
+        The method will remove any XSS-unsafe elements and attributes, even if allowed by the sanitizer.
+        If not specified, the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if `options.sanitizer` is passed a:
+    - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+      For example, a configuration that includes both "allowed" and "removed" configuration settings.
+    - string that does not have the value `"default"`.
+    - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}. Note this differs from {{domxref("Element.insertAdjacentHTML")}} which throws `NoModificationAllowedError` for a {{domxref("Document")}} parent.
+
+## Description
+
+`afterHTML()` drops any elements in the HTML input string that are invalid in the context of the parent element, such as a {{htmlelement("col")}} element outside of a {{htmlelement("table")}}.
+
+It then removes any HTML elements and attributes 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. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+
+If no sanitizer is specified in the `options.sanitizer` parameter, `afterHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
+
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
+
+`afterHTML()` can be used instead of {{domxref("Element.setHTML")}} when the HTML needs to be set after the current HTML, rather than in the current element.
+
+It should also be used instead of {{domxref("Element.afterHTMLUnsafe()")}}, 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](/en-US/docs/Web/API/Trusted_Types_API).
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+## Examples
+
+> [!NOTE]
+> The [`setHTML()`](/docs/Web/API/Element/setHTML#examples) page includes additional examples, including a live example, which are similar to how `afterHTML()` can be used.
+
+These examples shows some of the ways you can use `afterHTML()` to sanitize and inject a string of HTML.
+
+### Basic usage with default sanitizer
+
+Using the default sanitizer:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.afterHTML(unsanitizedString);
+// Result is that the following is added after the current element:
+// <p><i>abc</i> def</p>
+```
+
+### Using a custom sanitizer
+
+Using a custom `Sanitizer`, that allows only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements. Note that {{htmlelement("script")}} is XSS-unsafe, so it will be removed anyway:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+const mySanitizer = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.afterHTML(unsanitizedString, { sanitizer: mySanitizer });
+// Result is that the following is added after the current element:
+// <p> def</p>
+```
+
+### Using a custom sanitizer with `removeElements`
+
+Using a custom `SanitizerConfig`, that removes only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements, as well as other XSS-unsafe elements and attributes that are always removed by this method.
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.afterHTML(unsanitizedString, {
+  sanitizer: { removeElements: ["i", "script"] },
+});
+// Result is that the following is added after the current element:
+// <p> def</p>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Element.afterHTMLUnsafe()")}}
+- {{domxref("CharacterData.afterHTML()")}} and {{domxref("CharacterData.afterHTMLUnsafe()")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
+- [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API)
diff --git a/files/en-us/web/api/element/afterhtmlunsafe/index.md b/files/en-us/web/api/element/afterhtmlunsafe/index.md
new file mode 100644
index 000000000000000..4024398b699b946
--- /dev/null
+++ b/files/en-us/web/api/element/afterhtmlunsafe/index.md
@@ -0,0 +1,256 @@
+---
+title: "Element: afterHTMLUnsafe() method"
+short-title: afterHTMLUnsafe()
+slug: Web/API/Element/afterHTMLUnsafe
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.Element.afterHTMLUnsafe
+---
+
+{{APIRef("DOM")}}
+
+> [!WARNING]
+> This method parses its input as HTML, writing the result into the DOM.
+> APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the input originally came from an attacker.
+>
+> You can mitigate this risk by always passing `TrustedHTML` objects instead of strings and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+> See [Security considerations](#security_considerations) for more information.
+
+> [!NOTE]
+> {{domxref("Element.afterHTML()")}} should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.
+
+The **`afterHTMLUnsafe()`** method of the {{domxref("Element")}} interface is used to parse HTML input into a {{domxref("DocumentFragment")}}, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and then using it to insert the element in the DOM after the HTML element.
+
+The method does nothing if the node has no parent.
+
+Note that the safe variants of these methods (for example, {{domxref("Element.afterHTML")}}) always removes any XSS-unsafe elements or attributes — whether or not they are allowed by the sanitizer. The provided sanitizer is applied in addition to the default XSS-unsafe removal, whereas with `Unsafe` methods any provided sanitizer is the only sanitizer used.
+
+## Syntax
+
+```js-nolint
+afterHTMLUnsafe(input)
+afterHTMLUnsafe(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A {{domxref("TrustedHTML")}} instance or string defining HTML to be parsed.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object that defines what elements of the input will be allowed or removed.
+        This can also be a string with the value `"default"`, which applies a `Sanitizer` with the (XSS-safe) [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+        If not specified, no sanitizer is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run after inserting. The default is `false`.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if:
+    - `input` is passed a string when [Trusted Types](/en-US/docs/Web/API/Trusted_Types_API) are [enforced by a CSP](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) and no default policy is defined.
+    - `options.sanitizer` is passed a:
+      - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+        For example, a configuration that includes both "allowed" and "removed" configuration settings.
+      - string that does not have the value `"default"`.
+      - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}. Note this differs from {{domxref("Element.insertAdjacentHTML")}} which throws `NoModificationAllowedError` for a {{domxref("Document")}} parent.
+
+## Description
+
+The **`afterHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element ({{htmlelement("col")}} element outside of a {{htmlelement("table")}}).
+The `DocumentFragment` is then used to insert the element into the DOM.
+
+Unlike with {{domxref("Element.innerHTML")}}, [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in the input will be parsed into the DOM.
+If the string of HTML defines more than one [declarative shadow root](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in a particular shadow host then only the first {{domxref("ShadowRoot")}} is created — subsequent declarations are parsed as `<template>` elements within that shadow root.
+
+`afterHTMLUnsafe()` doesn't perform any sanitization by default, though also does not run scripts by default. If no sanitizer is passed as a parameter, all HTML entities in the input will be injected. It is therefore potentially even less safe than {{domxref("Element.innerHTML")}}, which does not allow {{htmlelement("script")}} execution when parsing.
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+### Security considerations
+
+The suffix "Unsafe" in the method name indicates that it does not enforce removal of all XSS-unsafe HTML entities (unlike {{domxref("Element.afterHTML()")}}).
+While it can do so if used with an appropriate sanitizer, it doesn't have to use an effective sanitizer, or any sanitizer at all!
+The method is therefore a possible vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized.
+
+You should mitigate this risk by always passing {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
+This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup (such as {{htmlelement("script")}} elements and event handler attributes), before it is injected.
+
+Using `TrustedHTML` makes it possible to audit and check that sanitization code is effective in just a few places, rather than scattered across all your injection sinks.
+You should not have to pass a sanitizer to the method when using `TrustedHTML`.
+
+If for any reason you can't use `TrustedHTML` (or even better, `afterHTML()`) then the next safest option is to use `afterHTMLUnsafe()` with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+
+### When should `afterHTMLUnsafe()` be used?
+
+`afterHTMLUnsafe()` should almost never be used if {{domxref("Element.afterHTML()")}} is available, because there are very few (if any) cases where user-provided HTML input should need to include XSS-unsafe elements.
+Not only is `afterHTML()` safe, but it avoids having to consider trusted types.
+
+Using `afterHTMLUnsafe()` might be appropriate if:
+
+- You can't use `afterHTML()` or trusted types (for whatever reason) and you want to have the safest possible filtering.
+  In this case you might use `afterHTMLUnsafe()` with the default {{domxref("Sanitizer")}} to filter all XSS-unsafe elements.
+- You can't use `afterHTML()` and the input might contain declarative shadow roots, so you can't use {{domxref("Element.innerHTML")}}.
+- You have an edge case where you have to allow HTML input that includes a known set of unsafe HTML entities.
+
+  You can't use `afterHTML()` in this case, because it strips all unsafe entities.
+  You could use `afterHTMLUnsafe()` without a sanitizer or `innerHTML`, but that would allow all unsafe entities.
+
+  A better option here is to call `afterHTMLUnsafe()` with a sanitizer that allows just those dangerous elements and attributes we actually need.
+  While this is still unsafe, it is safer than allowing all of them.
+
+For the last point, consider a situation where your code relies on being able to use unsafe `onclick` handlers.
+The following code shows the effect of the different methods and sanitizers for this case.
+
+```js
+const target = document.querySelector("#target");
+
+const input = "<img src=x onclick=alert('onclick') onerror=alert('onerror')>";
+
+// Safe - removes all XSS-unsafe entities.
+target.afterHTML(input);
+
+// Removes no event handler attributes
+target.afterHTMLUnsafe(input);
+
+// Safe - removes all XSS-unsafe entities.
+const configSafe = new Sanitizer();
+target.afterHTMLUnsafe(input, { sanitizer: configSafe });
+
+// Removes all XSS-unsafe entities except `onclick`
+const configLessSafe = new Sanitizer();
+configLessSafe.allowAttribute("onclick");
+target.afterHTMLUnsafe(input, { sanitizer: configLessSafe });
+```
+
+## Examples
+
+> [!NOTE]
+> The [`setHTMLUnsafe()`](/docs/Web/API/Element/setHTMLUnsafe#examples) page includes additional examples, including a live example, which are similar to how `afterHTMLUnsafe()` can be used.
+
+### afterHTMLUnsafe() with Trusted Types
+
+To mitigate the risk of XSS, we'll first create a `TrustedHTML` object from the string containing the HTML, and then pass that object to `afterHTMLUnsafe()`.
+Since trusted types are not yet supported on all browsers, we define the [trusted types tinyfill](/en-US/docs/Web/API/Trusted_Types_API#trusted_types_tinyfill).
+This acts as a transparent replacement for the Trusted Types JavaScript API:
+
+```js
+if (typeof trustedTypes === "undefined")
+  trustedTypes = { createPolicy: (n, rules) => rules };
+```
+
+Next we create a {{domxref("TrustedTypePolicy")}} that defines a {{domxref("TrustedTypePolicy/createHTML", "createHTML()")}} for transforming an input string into {{domxref("TrustedHTML")}} instances.
+Commonly implementations of `createHTML()` use a library such as [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the input as shown below:
+
+```js
+const policy = trustedTypes.createPolicy("my-policy", {
+  createHTML: (input) => DOMPurify.sanitize(input),
+});
+```
+
+Then we use this `policy` object to create a `TrustedHTML` object from the potentially unsafe input string:
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+// Create a TrustedHTML instance using the policy
+const trustedHTML = policy.createHTML(untrustedString);
+```
+
+Now that we have `trustedHTML`, the code below shows how you can use it with `afterHTMLUnsafe()`.
+The input has been through the transformation function, so we don't pass a sanitizer to the method.
+
+```js
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// afterHTMLUnsafe() with no sanitizer
+target.afterHTMLUnsafe(trustedHTML);
+```
+
+### Using afterHTMLUnsafe() without Trusted Types
+
+This example demonstrates the case where we aren't using trusted types, so we'll be passing sanitizer arguments.
+
+The code creates an untrusted string and shows a number of ways a sanitizer can be passed to the method.
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// Define custom Sanitizer and use in afterHTMLUnsafe()
+// This allows only elements: div, p, button, script
+const sanitizer1 = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.afterHTMLUnsafe(untrustedString, { sanitizer: sanitizer1 });
+
+// Define custom SanitizerConfig within afterHTMLUnsafe()
+// Removes the <script> element but allows other potentially unsafe entities.
+target.afterHTMLUnsafe(untrustedString, {
+  sanitizer: { removeElements: ["script"] },
+});
+```
+
+### Using afterHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString =
+  "<script src='example.js'></script><p>Other content</p>";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// No sanitizer is passed, so the <script> element is kept
+// and also executes the script after insertion.
+target.afterHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Element.afterHTML()")}}
+- {{domxref("CharacterData.afterHTML()")}} and {{domxref("CharacterData.afterHTMLUnsafe()")}}
+- {{domxref("Element.setHTMLUnsafe()")}}
+- {{domxref("Element.innerHTML")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
diff --git a/files/en-us/web/api/element/appendhtml/index.md b/files/en-us/web/api/element/appendhtml/index.md
new file mode 100644
index 000000000000000..46d61565a151585
--- /dev/null
+++ b/files/en-us/web/api/element/appendhtml/index.md
@@ -0,0 +1,155 @@
+---
+title: "Element: appendHTML() method"
+short-title: appendHTML()
+slug: Web/API/Element/appendHTML
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.Element.appendHTML
+---
+
+{{APIRef("DOM")}}
+
+The **`appendHTML()`** method of the {{domxref("Element")}} interface provides an XSS-safe method to parse and sanitize a string of HTML and insert it into the `Element` after the last child of the `Element`.
+
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
+
+## Syntax
+
+```js-nolint
+appendHTML(input)
+appendHTML(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A string defining HTML to be sanitized and inserted.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object which defines what elements of the input will be allowed or removed, or the string `"default"` for the default configuration.
+        The method will remove any XSS-unsafe elements and attributes, even if allowed by the sanitizer.
+        If not specified, the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if `options.sanitizer` is passed a:
+    - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+      For example, a configuration that includes both "allowed" and "removed" configuration settings.
+    - string that does not have the value `"default"`.
+    - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the element is an {{HTMLElement("html")}} element.
+
+## Description
+
+`appendHTML()` drops any elements in the HTML input string that are invalid in the context of the current element, such as a {{htmlelement("col")}} element outside of a {{htmlelement("table")}}.
+
+It then removes any HTML elements and attributes 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. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+
+If no sanitizer is specified in the `options.sanitizer` parameter, `appendHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
+
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
+
+The method does nothing if the element is a {{HTMLElement("script")}} element (and similar for SVG {{SVGElement("script")}} elements).
+
+For {{HTMLElement("template")}} elements, the HTML is inserted into the template contents (the template `DocumentFragment`), rather than as direct children.
+
+`appendHTML()` can be used instead of {{domxref("Element.setHTML")}} when the HTML needs to insert it into the DOM as the last child of the given element, rather than replacing the whole child HTML of the given element.
+
+It should also be used instead of {{domxref("Element.appendHTMLUnsafe()")}}, 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](/en-US/docs/Web/API/Trusted_Types_API).
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+## Examples
+
+> [!NOTE]
+> The [`setHTML()`](/docs/Web/API/Element/setHTML#examples) page includes additional examples, including a live example, which are similar to how `appendHTML()` can be used.
+
+These examples shows some of the ways you can use `appendHTML()` to sanitize and inject a string of HTML.
+
+### Basic usage with default sanitizer
+
+Using the default sanitizer:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.appendHTML(unsanitizedString);
+// Result is that the following is appended to the end of the current element:
+// <p><i>abc</i> def</p>
+```
+
+### Using a custom sanitizer
+
+Using a custom `Sanitizer`, that allows only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements. Note that {{htmlelement("script")}} is XSS-unsafe, so it will be removed anyway:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+const mySanitizer = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.appendHTML(unsanitizedString, { sanitizer: mySanitizer });
+// Result is that the following is appended to the end of the current element:
+// <p> def</p>
+```
+
+### Using a custom sanitizer with `removeElements`
+
+Using a custom `SanitizerConfig`, that removes only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements, as well as other XSS-unsafe elements and attributes that are always removed by this method.
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.appendHTML(unsanitizedString, {
+  sanitizer: { removeElements: ["i", "script"] },
+});
+// Result is that the following is appended to the end of the current element:
+// <p> def</p>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Element.appendHTMLUnsafe()")}}
+- {{domxref("ShadowRoot.appendHTML()")}} and {{domxref("ShadowRoot.appendHTMLUnsafe()")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
+- [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API)
diff --git a/files/en-us/web/api/element/appendhtmlunsafe/index.md b/files/en-us/web/api/element/appendhtmlunsafe/index.md
new file mode 100644
index 000000000000000..f180b2e45eb1c1b
--- /dev/null
+++ b/files/en-us/web/api/element/appendhtmlunsafe/index.md
@@ -0,0 +1,256 @@
+---
+title: "Element: appendHTMLUnsafe() method"
+short-title: appendHTMLUnsafe()
+slug: Web/API/Element/appendHTMLUnsafe
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.Element.appendHTMLUnsafe
+---
+
+{{APIRef("DOM")}}
+
+> [!WARNING]
+> This method parses its input as HTML, writing the result into the DOM.
+> APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the input originally came from an attacker.
+>
+> You can mitigate this risk by always passing `TrustedHTML` objects instead of strings and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+> See [Security considerations](#security_considerations) for more information.
+
+> [!NOTE]
+> {{domxref("Element.appendHTML()")}} should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.
+
+The **`appendHTMLUnsafe()`** method of the {{domxref("Element")}} interface is used to parse HTML input into a {{domxref("DocumentFragment")}}, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and then inserting it into the DOM as the last child of an element.
+
+Note that the safe variants of these methods (for example, {{domxref("Element.appendHTML")}}) always removes any XSS-unsafe elements or attributes — whether or not they are allowed by the sanitizer. The provided sanitizer is applied in addition to the default XSS-unsafe removal, whereas with `Unsafe` methods any provided sanitizer is the only sanitizer used.
+
+## Syntax
+
+```js-nolint
+appendHTMLUnsafe(input)
+appendHTMLUnsafe(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A {{domxref("TrustedHTML")}} instance or string defining HTML to be parsed.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object that defines what elements of the input will be allowed or removed.
+        This can also be a string with the value `"default"`, which applies a `Sanitizer` with the (XSS-safe) [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+        If not specified, no sanitizer is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run after inserting. The default is `false`.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if:
+    - `input` is passed a string when [Trusted Types](/en-US/docs/Web/API/Trusted_Types_API) are [enforced by a CSP](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) and no default policy is defined.
+    - `options.sanitizer` is passed a:
+      - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+        For example, a configuration that includes both "allowed" and "removed" configuration settings.
+      - string that does not have the value `"default"`.
+      - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the element is an {{HTMLElement("html")}} element.
+
+## Description
+
+The **`appendHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element ({{htmlelement("col")}} element outside of a {{htmlelement("table")}}).
+The `DocumentFragment` is then used to insert it into the DOM as the last child of the given element, rather than replacing the whole child HTML of the given element.
+
+For {{HTMLElement("template")}} elements, the HTML is inserted into the template contents (the template `DocumentFragment`), rather than as direct children.
+
+Unlike with {{domxref("Element.innerHTML")}}, [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in the input will be parsed into the DOM.
+If the string of HTML defines more than one [declarative shadow root](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in a particular shadow host then only the first {{domxref("ShadowRoot")}} is created — subsequent declarations are parsed as `<template>` elements within that shadow root.
+
+`appendHTMLUnsafe()` doesn't perform any sanitization by default, though also does not run scripts by default. If no sanitizer is passed as a parameter, all HTML entities in the input will be injected. It is therefore potentially even less safe than {{domxref("Element.innerHTML")}}, which does not allow {{htmlelement("script")}} execution when parsing.
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+### Security considerations
+
+The suffix "Unsafe" in the method name indicates that it does not enforce removal of all XSS-unsafe HTML entities (unlike {{domxref("Element.appendHTML()")}}).
+While it can do so if used with an appropriate sanitizer, it doesn't have to use an effective sanitizer, or any sanitizer at all!
+The method is therefore a possible vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized.
+
+You should mitigate this risk by always passing {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
+This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup (such as {{htmlelement("script")}} elements and event handler attributes), before it is injected.
+
+Using `TrustedHTML` makes it possible to audit and check that sanitization code is effective in just a few places, rather than scattered across all your injection sinks.
+You should not have to pass a sanitizer to the method when using `TrustedHTML`.
+
+If for any reason you can't use `TrustedHTML` (or even better, `appendHTML()`) then the next safest option is to use `appendHTMLUnsafe()` with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+
+### When should `appendHTMLUnsafe()` be used?
+
+`appendHTMLUnsafe()` should almost never be used if {{domxref("Element.appendHTML()")}} is available, because there are very few (if any) cases where user-provided HTML input should need to include XSS-unsafe elements.
+Not only is `appendHTML()` safe, but it avoids having to consider trusted types.
+
+Using `appendHTMLUnsafe()` might be appropriate if:
+
+- You can't use `appendHTML()` or trusted types (for whatever reason) and you want to have the safest possible filtering.
+  In this case you might use `appendHTMLUnsafe()` with the default {{domxref("Sanitizer")}} to filter all XSS-unsafe elements.
+- You can't use `appendHTML()` and the input might contain declarative shadow roots, so you can't use {{domxref("Element.innerHTML")}}.
+- You have an edge case where you have to allow HTML input that includes a known set of unsafe HTML entities.
+
+  You can't use `appendHTML()` in this case, because it strips all unsafe entities.
+  You could use `appendHTMLUnsafe()` without a sanitizer or `innerHTML`, but that would allow all unsafe entities.
+
+  A better option here is to call `appendHTMLUnsafe()` with a sanitizer that allows just those dangerous elements and attributes we actually need.
+  While this is still unsafe, it is safer than allowing all of them.
+
+For the last point, consider a situation where your code relies on being able to use unsafe `onclick` handlers.
+The following code shows the effect of the different methods and sanitizers for this case.
+
+```js
+const target = document.querySelector("#target");
+
+const input = "<img src=x onclick=alert('onclick') onerror=alert('onerror')>";
+
+// Safe - removes all XSS-unsafe entities.
+target.appendHTML(input);
+
+// Removes no event handler attributes
+target.appendHTMLUnsafe(input);
+
+// Safe - removes all XSS-unsafe entities.
+const configSafe = new Sanitizer();
+target.appendHTMLUnsafe(input, { sanitizer: configSafe });
+
+// Removes all XSS-unsafe entities except `onclick`
+const configLessSafe = new Sanitizer();
+configLessSafe.allowAttribute("onclick");
+target.appendHTMLUnsafe(input, { sanitizer: configLessSafe });
+```
+
+## Examples
+
+> [!NOTE]
+> The [`setHTMLUnsafe()`](/docs/Web/API/Element/setHTMLUnsafe#examples) page includes additional examples, including a live example, which are similar to how `appendHTMLUnsafe()` can be used.
+
+### appendHTMLUnsafe() with Trusted Types
+
+To mitigate the risk of XSS, we'll first create a `TrustedHTML` object from the string containing the HTML, and then pass that object to `appendHTMLUnsafe()`.
+Since trusted types are not yet supported on all browsers, we define the [trusted types tinyfill](/en-US/docs/Web/API/Trusted_Types_API#trusted_types_tinyfill).
+This acts as a transparent replacement for the Trusted Types JavaScript API:
+
+```js
+if (typeof trustedTypes === "undefined")
+  trustedTypes = { createPolicy: (n, rules) => rules };
+```
+
+Next we create a {{domxref("TrustedTypePolicy")}} that defines a {{domxref("TrustedTypePolicy/createHTML", "createHTML()")}} for transforming an input string into {{domxref("TrustedHTML")}} instances.
+Commonly implementations of `createHTML()` use a library such as [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the input as shown below:
+
+```js
+const policy = trustedTypes.createPolicy("my-policy", {
+  createHTML: (input) => DOMPurify.sanitize(input),
+});
+```
+
+Then we use this `policy` object to create a `TrustedHTML` object from the potentially unsafe input string:
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+// Create a TrustedHTML instance using the policy
+const trustedHTML = policy.createHTML(untrustedString);
+```
+
+Now that we have `trustedHTML`, the code below shows how you can use it with `appendHTMLUnsafe()`.
+The input has been through the transformation function, so we don't pass a sanitizer to the method.
+
+```js
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// appendHTMLUnsafe() with no sanitizer
+target.appendHTMLUnsafe(trustedHTML);
+```
+
+### Using appendHTMLUnsafe() without Trusted Types
+
+This example demonstrates the case where we aren't using trusted types, so we'll be passing sanitizer arguments.
+
+The code creates an untrusted string and shows a number of ways a sanitizer can be passed to the method.
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// Define custom Sanitizer and use in appendHTMLUnsafe()
+// This allows only elements: div, p, button, script
+const sanitizer1 = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.appendHTMLUnsafe(untrustedString, { sanitizer: sanitizer1 });
+
+// Define custom SanitizerConfig within appendHTMLUnsafe()
+// Removes the <script> element but allows other potentially unsafe entities.
+target.appendHTMLUnsafe(untrustedString, {
+  sanitizer: { removeElements: ["script"] },
+});
+```
+
+### Using appendHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString =
+  "<script src='example.js'></script><p>Other content</p>";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// No sanitizer is passed, so the <script> element is kept
+// and also executes the script after insertion.
+target.appendHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Element.appendHTML()")}}
+- {{domxref("ShadowRoot.appendHTML()")}} and {{domxref("ShadowRoot.appendHTMLUnsafe()")}}
+- {{domxref("Element.setHTMLUnsafe()")}}
+- {{domxref("Element.innerHTML")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
diff --git a/files/en-us/web/api/element/beforehtml/index.md b/files/en-us/web/api/element/beforehtml/index.md
new file mode 100644
index 000000000000000..6562fa206da0044
--- /dev/null
+++ b/files/en-us/web/api/element/beforehtml/index.md
@@ -0,0 +1,151 @@
+---
+title: "Element: beforeHTML() method"
+short-title: beforeHTML()
+slug: Web/API/Element/beforeHTML
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.Element.beforeHTML
+---
+
+{{APIRef("DOM")}}
+
+The **`beforeHTML()`** method of the {{domxref("Element")}} interface provides an XSS-safe method to parse and sanitize a string of HTML and insert it in the children list of the `Element`'s parent, just before the `Element`. Nothing happens if the node has no parent or the parent is a {{HTMLElement("script")}} element (and similar for SVG {{SVGElement("script")}} elements).
+
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
+
+## Syntax
+
+```js-nolint
+beforeHTML(input)
+beforeHTML(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A string defining HTML to be sanitized and inserted.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object which defines what elements of the input will be allowed or removed, or the string `"default"` for the default configuration.
+        The method will remove any XSS-unsafe elements and attributes, even if allowed by the sanitizer.
+        If not specified, the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if `options.sanitizer` is passed a:
+    - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+      For example, a configuration that includes both "allowed" and "removed" configuration settings.
+    - string that does not have the value `"default"`.
+    - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}. Note this differs from {{domxref("Element.insertAdjacentHTML")}} which throws `NoModificationAllowedError` for a {{domxref("Document")}} parent.
+
+## Description
+
+`beforeHTML()` drops any elements in the HTML input string that are invalid in the context of the parent element, such as a {{htmlelement("col")}} element outside of a {{htmlelement("table")}}.
+
+It then removes any HTML elements and attributes 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. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+
+If no sanitizer is specified in the `options.sanitizer` parameter, `beforeHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
+
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
+
+`beforeHTML()` can be used instead of {{domxref("Element.setHTML")}} when the HTML needs to be set before the current HTML, rather than in the current element.
+
+It should also be used instead of {{domxref("Element.beforeHTMLUnsafe()")}}, 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](/en-US/docs/Web/API/Trusted_Types_API).
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+## Examples
+
+> [!NOTE]
+> The [`setHTML()`](/docs/Web/API/Element/setHTML#examples) page includes additional examples, including a live example, which are similar to how `beforeHTML()` can be used.
+
+These examples shows some of the ways you can use `beforeHTML()` to sanitize and inject a string of HTML.
+
+### Basic usage with default sanitizer
+
+Using the default sanitizer:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.beforeHTML(unsanitizedString);
+// Result is that the following is added before after the current element:
+// <p><i>abc</i> def</p>
+```
+
+### Using a custom sanitizer
+
+Using a custom `Sanitizer`, that allows only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements. Note that {{htmlelement("script")}} is XSS-unsafe, so it will be removed anyway:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+const mySanitizer = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.beforeHTML(unsanitizedString, { sanitizer: mySanitizer });
+// Result is that the following is added before after the current element:
+// <p> def</p>
+```
+
+### Using a custom sanitizer with `removeElements`
+
+Using a custom `SanitizerConfig`, that removes only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements, as well as other XSS-unsafe elements and attributes that are always removed by this method.
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.beforeHTML(unsanitizedString, {
+  sanitizer: { removeElements: ["i", "script"] },
+});
+// Result is that the following is added before after the current element:
+// <p> def</p>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Element.beforeHTMLUnsafe()")}}
+- {{domxref("CharacterData.beforeHTML()")}} and {{domxref("CharacterData.beforeHTMLUnsafe()")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
+- [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API)
diff --git a/files/en-us/web/api/element/beforehtmlunsafe/index.md b/files/en-us/web/api/element/beforehtmlunsafe/index.md
new file mode 100644
index 000000000000000..a49a3e1e7a23641
--- /dev/null
+++ b/files/en-us/web/api/element/beforehtmlunsafe/index.md
@@ -0,0 +1,255 @@
+---
+title: "Element: beforeHTMLUnsafe() method"
+short-title: beforeHTMLUnsafe()
+slug: Web/API/Element/beforeHTMLUnsafe
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.Element.beforeHTMLUnsafe
+---
+
+{{APIRef("DOM")}}
+
+> [!WARNING]
+> This method parses its input as HTML, writing the result into the DOM.
+> APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the input originally came from an attacker.
+>
+> You can mitigate this risk by always passing `TrustedHTML` objects instead of strings and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+> See [Security considerations](#security_considerations) for more information.
+
+> [!NOTE]
+> {{domxref("Element.beforeHTML()")}} should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.
+
+The **`beforeHTMLUnsafe()`** method of the {{domxref("Element")}} interface is used to parse HTML input into a {{domxref("DocumentFragment")}}, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and then using it to insert the element in the DOM before the HTML element.
+
+The method does nothing if the node has no parent.
+
+Note that the safe variants of these methods (for example, {{domxref("Element.beforeHTML")}}) always removes any XSS-unsafe elements or attributes — whether or not they are allowed by the sanitizer. The provided sanitizer is applied in addition to the default XSS-unsafe removal, whereas with `Unsafe` methods any provided sanitizer is the only sanitizer used.
+
+## Syntax
+
+```js-nolint
+beforeHTMLUnsafe(input)
+beforeHTMLUnsafe(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A {{domxref("TrustedHTML")}} instance or string defining HTML to be parsed.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object that defines what elements of the input will be allowed or removed.
+        This can also be a string with the value `"default"`, which applies a `Sanitizer` with the (XSS-safe) [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+        If not specified, no sanitizer is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run before inserting. The default is `false`.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if:
+    - `input` is passed a string when [Trusted Types](/en-US/docs/Web/API/Trusted_Types_API) are [enforced by a CSP](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) and no default policy is defined.
+    - `options.sanitizer` is passed a:
+      - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+        For example, a configuration that includes both "allowed" and "removed" configuration settings.
+      - string that does not have the value `"default"`.
+      - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}. Note this differs from {{domxref("Element.insertAdjacentHTML")}} which throws `NoModificationAllowedError` for a {{domxref("Document")}} parent.
+
+## Description
+
+The **`beforeHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element ({{htmlelement("col")}} element outside of a {{htmlelement("table")}}).
+The `DocumentFragment` is then used to insert the element into the DOM.
+
+Unlike with {{domxref("Element.innerHTML")}}, [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in the input will be parsed into the DOM.
+If the string of HTML defines more than one [declarative shadow root](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in a particular shadow host then only the first {{domxref("ShadowRoot")}} is created — subsequent declarations are parsed as `<template>` elements within that shadow root.
+
+`beforeHTMLUnsafe()` doesn't perform any sanitization by default, though also does not run scripts by default. If no sanitizer is passed as a parameter, all HTML entities in the input will be injected. It is therefore potentially even less safe than {{domxref("Element.innerHTML")}}, which does not allow {{htmlelement("script")}} execution when parsing.
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+### Security considerations
+
+The suffix "Unsafe" in the method name indicates that it does not enforce removal of all XSS-unsafe HTML entities (unlike {{domxref("Element.beforeHTML()")}}).
+While it can do so if used with an appropriate sanitizer, it doesn't have to use an effective sanitizer, or any sanitizer at all!
+The method is therefore a possible vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized.
+
+You should mitigate this risk by always passing {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
+This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup (such as {{htmlelement("script")}} elements and event handler attributes), before it is injected.
+
+Using `TrustedHTML` makes it possible to audit and check that sanitization code is effective in just a few places, rather than scattered across all your injection sinks.
+You should not have to pass a sanitizer to the method when using `TrustedHTML`.
+
+If for any reason you can't use `TrustedHTML` (or even better, `beforeHTML()`) then the next safest option is to use `beforeHTMLUnsafe()` with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+
+### When should `beforeHTMLUnsafe()` be used?
+
+`beforeHTMLUnsafe()` should almost never be used if {{domxref("Element.beforeHTML()")}} is available, because there are very few (if any) cases where user-provided HTML input should need to include XSS-unsafe elements.
+Not only is `beforeHTML()` safe, but it avoids having to consider trusted types.
+
+Using `beforeHTMLUnsafe()` might be appropriate if:
+
+- You can't use `beforeHTML()` or trusted types (for whatever reason) and you want to have the safest possible filtering.
+  In this case you might use `beforeHTMLUnsafe()` with the default {{domxref("Sanitizer")}} to filter all XSS-unsafe elements.
+- You can't use `beforeHTML()` and the input might contain declarative shadow roots, so you can't use {{domxref("Element.innerHTML")}}.
+- You have an edge case where you have to allow HTML input that includes a known set of unsafe HTML entities.
+
+  You can't use `beforeHTML()` in this case, because it strips all unsafe entities.
+  You could use `beforeHTMLUnsafe()` without a sanitizer or `innerHTML`, but that would allow all unsafe entities.
+
+  A better option here is to call `beforeHTMLUnsafe()` with a sanitizer that allows just those dangerous elements and attributes we actually need.
+  While this is still unsafe, it is safer than allowing all of them.
+
+For the last point, consider a situation where your code relies on being able to use unsafe `onclick` handlers.
+The following code shows the effect of the different methods and sanitizers for this case.
+
+```js
+const target = document.querySelector("#target");
+
+const input = "<img src=x onclick=alert('onclick') onerror=alert('onerror')>";
+
+// Safe - removes all XSS-unsafe entities.
+target.beforeHTML(input);
+
+// Removes no event handler attributes
+target.beforeHTMLUnsafe(input);
+
+// Safe - removes all XSS-unsafe entities.
+const configSafe = new Sanitizer();
+target.beforeHTMLUnsafe(input, { sanitizer: configSafe });
+
+// Removes all XSS-unsafe entities except `onclick`
+const configLessSafe = new Sanitizer();
+configLessSafe.allowAttribute("onclick");
+target.beforeHTMLUnsafe(input, { sanitizer: configLessSafe });
+```
+
+## Examples
+
+> [!NOTE]
+> The [`setHTMLUnsafe()`](/docs/Web/API/Element/setHTMLUnsafe#examples) page includes additional examples, including a live example, which are similar to how `beforeHTMLUnsafe()` can be used.
+
+### beforeHTMLUnsafe() with Trusted Types
+
+To mitigate the risk of XSS, we'll first create a `TrustedHTML` object from the string containing the HTML, and then pass that object to `beforeHTMLUnsafe()`.
+Since trusted types are not yet supported on all browsers, we define the [trusted types tinyfill](/en-US/docs/Web/API/Trusted_Types_API#trusted_types_tinyfill).
+This acts as a transparent replacement for the Trusted Types JavaScript API:
+
+```js
+if (typeof trustedTypes === "undefined")
+  trustedTypes = { createPolicy: (n, rules) => rules };
+```
+
+Next we create a {{domxref("TrustedTypePolicy")}} that defines a {{domxref("TrustedTypePolicy/createHTML", "createHTML()")}} for transforming an input string into {{domxref("TrustedHTML")}} instances.
+Commonly implementations of `createHTML()` use a library such as [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the input as shown below:
+
+```js
+const policy = trustedTypes.createPolicy("my-policy", {
+  createHTML: (input) => DOMPurify.sanitize(input),
+});
+```
+
+Then we use this `policy` object to create a `TrustedHTML` object from the potentially unsafe input string:
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+// Create a TrustedHTML instance using the policy
+const trustedHTML = policy.createHTML(untrustedString);
+```
+
+Now that we have `trustedHTML`, the code below shows how you can use it with `beforeHTMLUnsafe()`.
+The input has been through the transformation function, so we don't pass a sanitizer to the method.
+
+```js
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// beforeHTMLUnsafe() with no sanitizer
+target.beforeHTMLUnsafe(trustedHTML);
+```
+
+### Using beforeHTMLUnsafe() without Trusted Types
+
+This example demonstrates the case where we aren't using trusted types, so we'll be passing sanitizer arguments.
+
+The code creates an untrusted string and shows a number of ways a sanitizer can be passed to the method.
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// Define custom Sanitizer and use in beforeHTMLUnsafe()
+// This allows only elements: div, p, button, script
+const sanitizer1 = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.beforeHTMLUnsafe(untrustedString, { sanitizer: sanitizer1 });
+
+// Define custom SanitizerConfig within beforeHTMLUnsafe()
+// Removes the <script> element but allows other potentially unsafe entities.
+target.beforeHTMLUnsafe(untrustedString, {
+  sanitizer: { removeElements: ["script"] },
+});
+```
+
+### Using beforeHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString =
+  "<script src='example.js'></script><p>Other content</p>";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// No sanitizer is passed, so the <script> element is kept and also executes it after insertion.
+target.beforeHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Element.beforeHTML()")}}
+- {{domxref("CharacterData.beforeHTML()")}} and {{domxref("CharacterData.beforeHTMLUnsafe()")}}
+- {{domxref("Element.setHTMLUnsafe()")}}
+- {{domxref("Element.innerHTML")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
diff --git a/files/en-us/web/api/element/prependhtml/index.md b/files/en-us/web/api/element/prependhtml/index.md
new file mode 100644
index 000000000000000..ba9252abfc2f244
--- /dev/null
+++ b/files/en-us/web/api/element/prependhtml/index.md
@@ -0,0 +1,155 @@
+---
+title: "Element: prependHTML() method"
+short-title: prependHTML()
+slug: Web/API/Element/prependHTML
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.Element.prependHTML
+---
+
+{{APIRef("DOM")}}
+
+The **`prependHTML()`** method of the {{domxref("Element")}} interface provides an XSS-safe method to parse and sanitize a string of HTML and insert it into the `Element` before the first child of the `Element`.
+
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
+
+## Syntax
+
+```js-nolint
+prependHTML(input)
+prependHTML(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A string defining HTML to be sanitized and inserted.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object which defines what elements of the input will be allowed or removed, or the string `"default"` for the default configuration.
+        The method will remove any XSS-unsafe elements and attributes, even if allowed by the sanitizer.
+        If not specified, the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if `options.sanitizer` is passed a:
+    - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+      For example, a configuration that includes both "allowed" and "removed" configuration settings.
+    - string that does not have the value `"default"`.
+    - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the element is an {{HTMLElement("html")}} element.
+
+## Description
+
+`prependHTML()` drops any elements in the HTML input string that are invalid in the context of the current element, such as a {{htmlelement("col")}} element outside of a {{htmlelement("table")}}.
+
+It then removes any HTML elements and attributes 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. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+
+If no sanitizer is specified in the `options.sanitizer` parameter, `prependHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
+
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
+
+The method does nothing if the element is a {{HTMLElement("script")}} element (and similar for SVG {{SVGElement("script")}} elements).
+
+For {{HTMLElement("template")}} elements, the HTML is inserted into the template contents (the template `DocumentFragment`), rather than as direct children.
+
+`prependHTML()` can be used instead of {{domxref("Element.setHTML")}} when the HTML needs to insert it into the DOM as the first child of the given element, rather than replacing the whole child HTML of the given element.
+
+It should also be used instead of {{domxref("Element.prependHTMLUnsafe()")}}, 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](/en-US/docs/Web/API/Trusted_Types_API).
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+## Examples
+
+> [!NOTE]
+> The [`setHTML()`](/docs/Web/API/Element/setHTML#examples) page includes additional examples, including a live example, which are similar to how `prependHTML()` can be used.
+
+These examples shows some of the ways you can use `prependHTML()` to sanitize and inject a string of HTML.
+
+### Basic usage with default sanitizer
+
+Using the default sanitizer:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.prependHTML(unsanitizedString);
+// Result is that the following is prepended to the current element:
+// <p><i>abc</i> def</p>
+```
+
+### Using a custom sanitizer
+
+Using a custom `Sanitizer`, that allows only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements. Note that {{htmlelement("script")}} is XSS-unsafe, so it will be removed anyway:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+const mySanitizer = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.prependHTML(unsanitizedString, { sanitizer: mySanitizer });
+// Result is that the following is prepended to the current element:
+// <p> def</p>
+```
+
+### Using a custom sanitizer with `removeElements`
+
+Using a custom `SanitizerConfig`, that removes only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements, as well as other XSS-unsafe elements and attributes that are always removed by this method.
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.prependHTML(unsanitizedString, {
+  sanitizer: { removeElements: ["i", "script"] },
+});
+// Result is that the following is prepended to the current element:
+// <p> def</p>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Element.prependHTMLUnsafe()")}}
+- {{domxref("ShadowRoot.prependHTML()")}} and {{domxref("ShadowRoot.prependHTMLUnsafe()")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
+- [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API)
diff --git a/files/en-us/web/api/element/prependhtmlunsafe/index.md b/files/en-us/web/api/element/prependhtmlunsafe/index.md
new file mode 100644
index 000000000000000..28907f328a0248d
--- /dev/null
+++ b/files/en-us/web/api/element/prependhtmlunsafe/index.md
@@ -0,0 +1,256 @@
+---
+title: "Element: prependHTMLUnsafe() method"
+short-title: prependHTMLUnsafe()
+slug: Web/API/Element/prependHTMLUnsafe
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.Element.prependHTMLUnsafe
+---
+
+{{APIRef("DOM")}}
+
+> [!WARNING]
+> This method parses its input as HTML, writing the result into the DOM.
+> APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the input originally came from an attacker.
+>
+> You can mitigate this risk by always passing `TrustedHTML` objects instead of strings and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+> See [Security considerations](#security_considerations) for more information.
+
+> [!NOTE]
+> {{domxref("Element.prependHTML()")}} should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.
+
+The **`prependHTMLUnsafe()`** method of the {{domxref("Element")}} interface is used to parse HTML input into a {{domxref("DocumentFragment")}}, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and then inserting it into the DOM as the first child of an element.
+
+Note that the safe variants of these methods (for example, {{domxref("Element.prependHTML")}}) always removes any XSS-unsafe elements or attributes — whether or not they are allowed by the sanitizer. The provided sanitizer is applied in addition to the default XSS-unsafe removal, whereas with `Unsafe` methods any provided sanitizer is the only sanitizer used.
+
+## Syntax
+
+```js-nolint
+prependHTMLUnsafe(input)
+prependHTMLUnsafe(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A {{domxref("TrustedHTML")}} instance or string defining HTML to be parsed.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object that defines what elements of the input will be allowed or removed.
+        This can also be a string with the value `"default"`, which applies a `Sanitizer` with the (XSS-safe) [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+        If not specified, no sanitizer is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run after inserting. The default is `false`.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if:
+    - `input` is passed a string when [Trusted Types](/en-US/docs/Web/API/Trusted_Types_API) are [enforced by a CSP](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) and no default policy is defined.
+    - `options.sanitizer` is passed a:
+      - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+        For example, a configuration that includes both "allowed" and "removed" configuration settings.
+      - string that does not have the value `"default"`.
+      - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the element is an {{HTMLElement("html")}} element.
+
+## Description
+
+The **`prependHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element ({{htmlelement("col")}} element outside of a {{htmlelement("table")}}).
+The `DocumentFragment` is then used to insert it into the DOM as the first child of the given element, rather than replacing the whole child HTML of the given element.
+
+For {{HTMLElement("template")}} elements, the HTML is inserted into the template contents (the template `DocumentFragment`), rather than as direct children.
+
+Unlike with {{domxref("Element.innerHTML")}}, [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in the input will be parsed into the DOM.
+If the string of HTML defines more than one [declarative shadow root](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in a particular shadow host then only the first {{domxref("ShadowRoot")}} is created — subsequent declarations are parsed as `<template>` elements within that shadow root.
+
+`prependHTMLUnsafe()` doesn't perform any sanitization by default, though also does not run scripts by default. If no sanitizer is passed as a parameter, all HTML entities in the input will be injected. It is therefore potentially even less safe than {{domxref("Element.innerHTML")}}, which does not allow {{htmlelement("script")}} execution when parsing.
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+### Security considerations
+
+The suffix "Unsafe" in the method name indicates that it does not enforce removal of all XSS-unsafe HTML entities (unlike {{domxref("Element.prependHTML()")}}).
+While it can do so if used with an appropriate sanitizer, it doesn't have to use an effective sanitizer, or any sanitizer at all!
+The method is therefore a possible vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized.
+
+You should mitigate this risk by always passing {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
+This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup (such as {{htmlelement("script")}} elements and event handler attributes), before it is injected.
+
+Using `TrustedHTML` makes it possible to audit and check that sanitization code is effective in just a few places, rather than scattered across all your injection sinks.
+You should not have to pass a sanitizer to the method when using `TrustedHTML`.
+
+If for any reason you can't use `TrustedHTML` (or even better, `prependHTML()`) then the next safest option is to use `prependHTMLUnsafe()` with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+
+### When should `prependHTMLUnsafe()` be used?
+
+`prependHTMLUnsafe()` should almost never be used if {{domxref("Element.prependHTML()")}} is available, because there are very few (if any) cases where user-provided HTML input should need to include XSS-unsafe elements.
+Not only is `prependHTML()` safe, but it avoids having to consider trusted types.
+
+Using `prependHTMLUnsafe()` might be appropriate if:
+
+- You can't use `prependHTML()` or trusted types (for whatever reason) and you want to have the safest possible filtering.
+  In this case you might use `prependHTMLUnsafe()` with the default {{domxref("Sanitizer")}} to filter all XSS-unsafe elements.
+- You can't use `prependHTML()` and the input might contain declarative shadow roots, so you can't use {{domxref("Element.innerHTML")}}.
+- You have an edge case where you have to allow HTML input that includes a known set of unsafe HTML entities.
+
+  You can't use `prependHTML()` in this case, because it strips all unsafe entities.
+  You could use `prependHTMLUnsafe()` without a sanitizer or `innerHTML`, but that would allow all unsafe entities.
+
+  A better option here is to call `prependHTMLUnsafe()` with a sanitizer that allows just those dangerous elements and attributes we actually need.
+  While this is still unsafe, it is safer than allowing all of them.
+
+For the last point, consider a situation where your code relies on being able to use unsafe `onclick` handlers.
+The following code shows the effect of the different methods and sanitizers for this case.
+
+```js
+const target = document.querySelector("#target");
+
+const input = "<img src=x onclick=alert('onclick') onerror=alert('onerror')>";
+
+// Safe - removes all XSS-unsafe entities.
+target.prependHTML(input);
+
+// Removes no event handler attributes
+target.prependHTMLUnsafe(input);
+
+// Safe - removes all XSS-unsafe entities.
+const configSafe = new Sanitizer();
+target.prependHTMLUnsafe(input, { sanitizer: configSafe });
+
+// Removes all XSS-unsafe entities except `onclick`
+const configLessSafe = new Sanitizer();
+configLessSafe.allowAttribute("onclick");
+target.prependHTMLUnsafe(input, { sanitizer: configLessSafe });
+```
+
+## Examples
+
+> [!NOTE]
+> The [`setHTMLUnsafe()`](/docs/Web/API/Element/setHTMLUnsafe#examples) page includes additional examples, including a live example, which are similar to how `prependHTMLUnsafe()` can be used.
+
+### prependHTMLUnsafe() with Trusted Types
+
+To mitigate the risk of XSS, we'll first create a `TrustedHTML` object from the string containing the HTML, and then pass that object to `prependHTMLUnsafe()`.
+Since trusted types are not yet supported on all browsers, we define the [trusted types tinyfill](/en-US/docs/Web/API/Trusted_Types_API#trusted_types_tinyfill).
+This acts as a transparent replacement for the Trusted Types JavaScript API:
+
+```js
+if (typeof trustedTypes === "undefined")
+  trustedTypes = { createPolicy: (n, rules) => rules };
+```
+
+Next we create a {{domxref("TrustedTypePolicy")}} that defines a {{domxref("TrustedTypePolicy/createHTML", "createHTML()")}} for transforming an input string into {{domxref("TrustedHTML")}} instances.
+Commonly implementations of `createHTML()` use a library such as [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the input as shown below:
+
+```js
+const policy = trustedTypes.createPolicy("my-policy", {
+  createHTML: (input) => DOMPurify.sanitize(input),
+});
+```
+
+Then we use this `policy` object to create a `TrustedHTML` object from the potentially unsafe input string:
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+// Create a TrustedHTML instance using the policy
+const trustedHTML = policy.createHTML(untrustedString);
+```
+
+Now that we have `trustedHTML`, the code below shows how you can use it with `prependHTMLUnsafe()`.
+The input has been through the transformation function, so we don't pass a sanitizer to the method.
+
+```js
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// prependHTMLUnsafe() with no sanitizer
+target.prependHTMLUnsafe(trustedHTML);
+```
+
+### Using prependHTMLUnsafe() without Trusted Types
+
+This example demonstrates the case where we aren't using trusted types, so we'll be passing sanitizer arguments.
+
+The code creates an untrusted string and shows a number of ways a sanitizer can be passed to the method.
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// Define custom Sanitizer and use in prependHTMLUnsafe()
+// This allows only elements: div, p, button, script
+const sanitizer1 = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.prependHTMLUnsafe(untrustedString, { sanitizer: sanitizer1 });
+
+// Define custom SanitizerConfig within prependHTMLUnsafe()
+// Removes the <script> element but allows other potentially unsafe entities.
+target.prependHTMLUnsafe(untrustedString, {
+  sanitizer: { removeElements: ["script"] },
+});
+```
+
+### Using prependHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString =
+  "<script src='example.js'></script><p>Other content</p>";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// No sanitizer is passed, so the <script> element is kept and also executes it after insertion.
+target.prependHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Element.prependHTML()")}}
+- {{domxref("ShadowRoot.prependHTML()")}} and {{domxref("ShadowRoot.prependHTMLUnsafe()")}}
+- {{domxref("Element.setHTMLUnsafe()")}}
+- {{domxref("Element.innerHTML")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")
+  }}
diff --git a/files/en-us/web/api/element/replacewithhtml/index.md b/files/en-us/web/api/element/replacewithhtml/index.md
new file mode 100644
index 000000000000000..cd75f29ed5484af
--- /dev/null
+++ b/files/en-us/web/api/element/replacewithhtml/index.md
@@ -0,0 +1,153 @@
+---
+title: "Element: replaceWithHTML() method"
+short-title: replaceWithHTML()
+slug: Web/API/Element/replaceWithHTML
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.Element.replaceWithHTML
+---
+
+{{APIRef("DOM")}}
+
+The **`replaceWithHTML()`** method of the {{domxref("Element")}} interface provides an XSS-safe method to parse and sanitize a string of HTML and insert it into the DOM as a replacement of the `Element`.
+
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
+
+The method does nothing if the node has no parent or the parent is a {{HTMLElement("script")}} element (and similar for SVG {{SVGElement("script")}} elements).
+
+## Syntax
+
+```js-nolint
+replaceWithHTML(input)
+replaceWithHTML(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A string defining HTML to be sanitized and replace the element.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object which defines what elements of the input will be allowed or removed, or the string `"default"` for the default configuration.
+        The method will remove any XSS-unsafe elements and attributes, even if allowed by the sanitizer.
+        If not specified, the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if `options.sanitizer` is passed a:
+    - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+      For example, a configuration that includes both "allowed" and "removed" configuration settings.
+    - string that does not have the value `"default"`.
+    - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}. Note this differs from {{domxref("Element.insertAdjacentHTML")}} which throws `NoModificationAllowedError` for a {{domxref("Document")}} parent.
+
+## Description
+
+`replaceWithHTML()` drops any elements in the HTML input string that are invalid in the context of the parent element, such as a {{htmlelement("col")}} element outside of a {{htmlelement("table")}}.
+
+It then removes any HTML elements and attributes 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. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+
+If no sanitizer is specified in the `options.sanitizer` parameter, `replaceWithHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
+
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
+
+`replaceWithHTML()` can be used instead of {{domxref("Element.setHTML")}} when the whole element needs to be replaced.
+
+It should also be used instead of {{domxref("Element.replaceWithHTMLUnsafe()")}}, 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](/en-US/docs/Web/API/Trusted_Types_API).
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+## Examples
+
+> [!NOTE]
+> The [`setHTML()`](/docs/Web/API/Element/setHTML#examples) page includes additional examples, including a live example, which are similar to how `replaceWithHTML()` can be used.
+
+These examples shows some of the ways you can use `replaceWithHTML()` to sanitize and inject a string of HTML.
+
+### Basic usage with default sanitizer
+
+Using the default sanitizer:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.replaceWithHTML(unsanitizedString);
+// Result is that the element is replaced with the following:
+// <p><i>abc</i> def</p>
+```
+
+### Using a custom sanitizer
+
+Using a custom `Sanitizer`, that allows only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements. Note that {{htmlelement("script")}} is XSS-unsafe, so it will be removed anyway:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+const mySanitizer = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.replaceWithHTML(unsanitizedString, { sanitizer: mySanitizer });
+// Result is that the element is replaced with the following:
+// <p> def</p>
+```
+
+### Using a custom sanitizer with `removeElements`
+
+Using a custom `SanitizerConfig`, that removes only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements, as well as other XSS-unsafe elements and attributes that are always removed by this method.
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.replaceWithHTML(unsanitizedString, {
+  sanitizer: { removeElements: ["i", "script"] },
+});
+// Result is that the element is replaced with the following:
+// <p> def</p>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Element.replaceWithHTMLUnsafe()")}}
+- {{domxref("CharacterData.replaceWithHTML()")}} and {{domxref("CharacterData.replaceWithHTMLUnsafe()")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
+- [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API)
diff --git a/files/en-us/web/api/element/replacewithhtmlunsafe/index.md b/files/en-us/web/api/element/replacewithhtmlunsafe/index.md
new file mode 100644
index 000000000000000..9cade4a4d05925d
--- /dev/null
+++ b/files/en-us/web/api/element/replacewithhtmlunsafe/index.md
@@ -0,0 +1,256 @@
+---
+title: "Element: replaceWithHTMLUnsafe() method"
+short-title: replaceWithHTMLUnsafe()
+slug: Web/API/Element/replaceWithHTMLUnsafe
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.Element.replaceWithHTMLUnsafe
+---
+
+{{APIRef("DOM")}}
+
+> [!WARNING]
+> This method parses its input as HTML, writing the result into the DOM.
+> APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the input originally came from an attacker.
+>
+> You can mitigate this risk by always passing `TrustedHTML` objects instead of strings and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+> See [Security considerations](#security_considerations) for more information.
+
+> [!NOTE]
+> {{domxref("Element.replaceWithHTML()")}} should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.
+
+The **`replaceWithHTMLUnsafe()`** method of the {{domxref("Element")}} interface is used to parse HTML input into a {{domxref("DocumentFragment")}}, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and then using it to replace the element in the DOM.
+
+The method does nothing if the node has no parent.
+
+Note that the safe variants of these methods (for example, {{domxref("Element.replaceWithHTML")}}) always removes any XSS-unsafe elements or attributes — whether or not they are allowed by the sanitizer. The provided sanitizer is applied in addition to the default XSS-unsafe removal, whereas with `Unsafe` methods any provided sanitizer is the only sanitizer used.
+
+## Syntax
+
+```js-nolint
+replaceWithHTMLUnsafe(input)
+replaceWithHTMLUnsafe(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A {{domxref("TrustedHTML")}} instance or string defining HTML to be parsed.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object that defines what elements of the input will be allowed or removed.
+        This can also be a string with the value `"default"`, which applies a `Sanitizer` with the (XSS-safe) [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+        If not specified, no sanitizer is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run after inserting. The default is `false`.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if:
+    - `input` is passed a string when [Trusted Types](/en-US/docs/Web/API/Trusted_Types_API) are [enforced by a CSP](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) and no default policy is defined.
+    - `options.sanitizer` is passed a:
+      - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+        For example, a configuration that includes both "allowed" and "removed" configuration settings.
+      - string that does not have the value `"default"`.
+      - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : Thrown when the parent element is a {{domxref("Document")}}, an {{HTMLElement("html")}} element, a {{HTMLElement("template")}} element, or a hostless {{domxref("DocumentFragment")}}. Note this differs from {{domxref("Element.insertAdjacentHTML")}} which throws `NoModificationAllowedError` for a {{domxref("Document")}} parent.
+
+## Description
+
+The **`replaceWithHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element ({{htmlelement("col")}} element outside of a {{htmlelement("table")}}).
+The `DocumentFragment` is then used to replace the element in the DOM.
+
+Unlike with {{domxref("Element.innerHTML")}}, [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in the input will be parsed into the DOM.
+If the string of HTML defines more than one [declarative shadow root](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in a particular shadow host then only the first {{domxref("ShadowRoot")}} is created — subsequent declarations are parsed as `<template>` elements within that shadow root.
+
+`replaceWithHTMLUnsafe()` doesn't perform any sanitization by default, though also does not run scripts by default. If no sanitizer is passed as a parameter, all HTML entities in the input will be injected. It is therefore potentially even less safe than {{domxref("Element.innerHTML")}}, which does not allow {{htmlelement("script")}} execution when parsing.
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+### Security considerations
+
+The suffix "Unsafe" in the method name indicates that it does not enforce removal of all XSS-unsafe HTML entities (unlike {{domxref("Element.replaceWithHTML()")}}).
+While it can do so if used with an appropriate sanitizer, it doesn't have to use an effective sanitizer, or any sanitizer at all!
+The method is therefore a possible vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized.
+
+You should mitigate this risk by always passing {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
+This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup (such as {{htmlelement("script")}} elements and event handler attributes), before it is injected.
+
+Using `TrustedHTML` makes it possible to audit and check that sanitization code is effective in just a few places, rather than scattered across all your injection sinks.
+You should not have to pass a sanitizer to the method when using `TrustedHTML`.
+
+If for any reason you can't use `TrustedHTML` (or even better, `replaceWithHTML()`) then the next safest option is to use `replaceWithHTMLUnsafe()` with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+
+### When should `replaceWithHTMLUnsafe()` be used?
+
+`replaceWithHTMLUnsafe()` should almost never be used if {{domxref("Element.replaceWithHTML()")}} is available, because there are very few (if any) cases where user-provided HTML input should need to include XSS-unsafe elements.
+Not only is `replaceWithHTML()` safe, but it avoids having to consider trusted types.
+
+Using `replaceWithHTMLUnsafe()` might be appropriate if:
+
+- You can't use `replaceWithHTML()` or trusted types (for whatever reason) and you want to have the safest possible filtering.
+  In this case you might use `replaceWithHTMLUnsafe()` with the default {{domxref("Sanitizer")}} to filter all XSS-unsafe elements.
+- You can't use `replaceWithHTML()` and the input might contain declarative shadow roots, so you can't use {{domxref("Element.innerHTML")}}.
+- You have an edge case where you have to allow HTML input that includes a known set of unsafe HTML entities.
+
+  You can't use `replaceWithHTML()` in this case, because it strips all unsafe entities.
+  You could use `replaceWithHTMLUnsafe()` without a sanitizer or `innerHTML`, but that would allow all unsafe entities.
+
+  A better option here is to call `replaceWithHTMLUnsafe()` with a sanitizer that allows just those dangerous elements and attributes we actually need.
+  While this is still unsafe, it is safer than allowing all of them.
+
+For the last point, consider a situation where your code relies on being able to use unsafe `onclick` handlers.
+The following code shows the effect of the different methods and sanitizers for this case.
+
+```js
+const target = document.querySelector("#target");
+
+const input = "<img src=x onclick=alert('onclick') onerror=alert('onerror')>";
+
+// Safe - removes all XSS-unsafe entities.
+target.replaceWithHTML(input);
+
+// Removes no event handler attributes
+target.replaceWithHTMLUnsafe(input);
+
+// Safe - removes all XSS-unsafe entities.
+const configSafe = new Sanitizer();
+target.replaceWithHTMLUnsafe(input, { sanitizer: configSafe });
+
+// Removes all XSS-unsafe entities except `onclick`
+const configLessSafe = new Sanitizer();
+configLessSafe.allowAttribute("onclick");
+target.replaceWithHTMLUnsafe(input, { sanitizer: configLessSafe });
+```
+
+## Examples
+
+> [!NOTE]
+> The [`setHTMLUnsafe()`](/docs/Web/API/Element/setHTMLUnsafe#examples) page includes additional examples, including a live example, which are similar to how `replaceWithHTMLUnsafe()` can be used.
+
+### replaceWithHTMLUnsafe() with Trusted Types
+
+To mitigate the risk of XSS, we'll first create a `TrustedHTML` object from the string containing the HTML, and then pass that object to `replaceWithHTMLUnsafe()`.
+Since trusted types are not yet supported on all browsers, we define the [trusted types tinyfill](/en-US/docs/Web/API/Trusted_Types_API#trusted_types_tinyfill).
+This acts as a transparent replacement for the Trusted Types JavaScript API:
+
+```js
+if (typeof trustedTypes === "undefined")
+  trustedTypes = { createPolicy: (n, rules) => rules };
+```
+
+Next we create a {{domxref("TrustedTypePolicy")}} that defines a {{domxref("TrustedTypePolicy/createHTML", "createHTML()")}} for transforming an input string into {{domxref("TrustedHTML")}} instances.
+Commonly implementations of `createHTML()` use a library such as [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the input as shown below:
+
+```js
+const policy = trustedTypes.createPolicy("my-policy", {
+  createHTML: (input) => DOMPurify.sanitize(input),
+});
+```
+
+Then we use this `policy` object to create a `TrustedHTML` object from the potentially unsafe input string:
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+// Create a TrustedHTML instance using the policy
+const trustedHTML = policy.createHTML(untrustedString);
+```
+
+Now that we have `trustedHTML`, the code below shows how you can use it with `replaceWithHTMLUnsafe()`.
+The input has been through the transformation function, so we don't pass a sanitizer to the method.
+
+```js
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// replaceWithHTMLUnsafe() with no sanitizer
+target.replaceWithHTMLUnsafe(trustedHTML);
+```
+
+### Using replaceWithHTMLUnsafe() without Trusted Types
+
+This example demonstrates the case where we aren't using trusted types, so we'll be passing sanitizer arguments.
+
+The code creates an untrusted string and shows a number of ways a sanitizer can be passed to the method.
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// Define custom Sanitizer and use in replaceWithHTMLUnsafe()
+// This allows only elements: div, p, button, script
+const sanitizer1 = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.replaceWithHTMLUnsafe(untrustedString, { sanitizer: sanitizer1 });
+
+// Define custom SanitizerConfig within replaceWithHTMLUnsafe()
+// Removes the <script> element but allows other potentially unsafe entities.
+target.replaceWithHTMLUnsafe(untrustedString, {
+  sanitizer: { removeElements: ["script"] },
+});
+```
+
+### Using replaceWithHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString =
+  "<script src='example.js'></script><p>Other content</p>";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// No sanitizer is passed, so the <script> element is kept
+// and also executes the script after insertion.
+target.replaceWithHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Element.replaceWithHTML()")}}
+- {{domxref("CharacterData.replaceWithHTML()")}} and {{domxref("CharacterData.replaceWithHTMLUnsafe()")}}
+- {{domxref("Element.setHTMLUnsafe()")}}
+- {{domxref("Element.innerHTML")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
diff --git a/files/en-us/web/api/element/sethtml/index.md b/files/en-us/web/api/element/sethtml/index.md
index 26e3e41fd94a337..b3adb54d3c49b47 100644
--- a/files/en-us/web/api/element/sethtml/index.md
+++ b/files/en-us/web/api/element/sethtml/index.md
@@ -10,8 +10,8 @@ browser-compat: api.Element.setHTML
 
 The **`setHTML()`** method of the {{domxref("Element")}} interface provides an XSS-safe method to parse and sanitize a string of HTML and insert it into the DOM as a subtree of the element.
 
-The method removes any elements and attributes that are considered XSS-unsafe, even if allowed by a passed sanitizer.
-Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{SVGElement("use")}}, and event handler attributes.
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
 
 It is recommended (if supported) as a drop-in replacement for {{domxref("Element.innerHTML")}} when setting a user-provided string of HTML.
 
@@ -53,12 +53,14 @@ None (`undefined`).
 The **`setHTML()`** method provides an XSS-safe method to parse and sanitize a string of HTML into a {{domxref("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 {{htmlelement("col")}} element outside of a {{htmlelement("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.
+It then removes any HTML elements and attributes 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. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
 
 If no sanitizer is specified in the `options.sanitizer` parameter, `setHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
 This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
 
-A custom `Sanitizer` or `SanitizerConfig` can be specified to choose which elements, attributes, and comments are allowed or removed.
+For {{HTMLElement("template")}} elements, the HTML is inserted into the template contents (the template `DocumentFragment`), rather than as direct children.
+
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
 
 `setHTML()` should be used instead of {{domxref("Element.innerHTML")}} for inserting untrusted strings of HTML into an element.
@@ -66,6 +68,21 @@ It should also be used instead of {{domxref("Element.setHTMLUnsafe()")}}, unless
 
 Note that since this method always sanitizes input strings of XSS-unsafe entities, it is not secured or validated using the [Trusted Types API](/en-US/docs/Web/API/Trusted_Types_API).
 
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
 ### Re-parsing and mutated XSS (mXSS)
 
 Even after sanitizing HTML input with `setHTML()`, it is still not safe to serialize the HTML and re-parse it using `innerHTML`.
@@ -94,31 +111,50 @@ The simple rule to avoid this problem is to only ever inject HTML strings using
 
 ## Examples
 
-### Basic usage
+These examples shows some of the ways you can use `setHTML()` to sanitize and inject a string of HTML.
 
-This example shows some of the ways you can use `setHTML()` to sanitize and inject a string of HTML.
+### Basic usage with default sanitizer
+
+Using the default sanitizer:
 
 ```js
-// Define unsanitized string of HTML
-const unsanitizedString = "abc <script>alert(1)<" + "/script> def";
-// Get the target Element with id "target"
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
 const target = document.getElementById("target");
 
-// setHTML() with default sanitizer
 target.setHTML(unsanitizedString);
+// Result is that the element is set to the current contents:
+// <p><i>abc</i> def</p>
+```
+
+### Using a custom sanitizer
+
+Using a custom `Sanitizer`, that allows only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements. Note that {{htmlelement("script")}} is XSS-unsafe, so it will be removed anyway:
 
-// 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({
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+const mySanitizer = new Sanitizer({
   elements: ["div", "p", "button", "script"],
 });
-target.setHTML(unsanitizedString, { sanitizer: sanitizer1 });
+target.setHTML(unsanitizedString, { sanitizer: mySanitizer });
+// Result is that the element is set to the current contents:
+// <p> def</p>
+```
+
+### Using a custom sanitizer with `removeElements`
+
+Using a custom `SanitizerConfig`, that removes only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements, as well as other XSS-unsafe elements and attributes that are always removed by this method.
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
 
-// 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"] },
+  sanitizer: { removeElements: ["i", "script"] },
 });
+// Result is that the element is set to the current contents:
+// <p> def</p>
 ```
 
 ### `setHTML()` live example
diff --git a/files/en-us/web/api/element/sethtmlunsafe/index.md b/files/en-us/web/api/element/sethtmlunsafe/index.md
index cd2755bd586a5a2..7a067af6fe63e7b 100644
--- a/files/en-us/web/api/element/sethtmlunsafe/index.md
+++ b/files/en-us/web/api/element/sethtmlunsafe/index.md
@@ -20,6 +20,8 @@ browser-compat: api.Element.setHTMLUnsafe
 
 The **`setHTMLUnsafe()`** method of the {{domxref("Element")}} interface is used to parse HTML input into a {{domxref("DocumentFragment")}}, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and then using it to replace the element's subtree in the DOM.
 
+Note that the safe variants of these methods (for example, {{domxref("Element.setHTML")}}) always removes any XSS-unsafe elements or attributes — whether or not they are allowed by the sanitizer. The provided sanitizer is applied in addition to the default XSS-unsafe removal, whereas with `Unsafe` methods any provided sanitizer is the only sanitizer used.
+
 ## Syntax
 
 ```js-nolint
@@ -39,6 +41,8 @@ setHTMLUnsafe(input, options)
         If not specified, no sanitizer is used.
 
         Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run after inserting. The default is `false`.
 
 ### Return value
 
@@ -54,18 +58,36 @@ None (`undefined`).
         For example, a configuration that includes both "allowed" and "removed" configuration settings.
       - string that does not have the value `"default"`.
       - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
 
 ## Description
 
-The **`setHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element (such as {{htmlelement("li")}} inside a {{htmlelement("div")}}).
+The **`setHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element ({{htmlelement("col")}} element outside of a {{htmlelement("table")}}).
 The `DocumentFragment` is then used to replace the element's subtree in the DOM.
 
+For {{HTMLElement("template")}} elements, the HTML is inserted into the template contents (the template `DocumentFragment`), rather than as direct children.
+
 Unlike with {{domxref("Element.innerHTML")}}, [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in the input will be parsed into the DOM.
 If the string of HTML defines more than one [declarative shadow root](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in a particular shadow host then only the first {{domxref("ShadowRoot")}} is created — subsequent declarations are parsed as `<template>` elements within that shadow root.
 
 `setHTMLUnsafe()` doesn't perform any sanitization by default.
 If no sanitizer is passed as a parameter, all HTML entities in the input will be injected.
-It is therefore potentially even less safe that {{domxref("Element.innerHTML")}}, which disables {{htmlelement("script")}} execution when parsing.
+It is therefore potentially even less safe than {{domxref("Element.innerHTML")}}, which disables {{htmlelement("script")}} execution when parsing.
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("Element")}}:
+
+| Action                                         | API                                                       | Unsafe API                                                            |
+| ---------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- |
+| Set the HTML contents of the element           | {{domxref("Element.setHTML", "setHTML")}}                 | {{domxref("Element.setHTMLUnsafe", "setHTMLUnsafe")}}                 |
+| Replace the entire element with this HTML      | {{domxref("Element.replaceWithHTML", "replaceWithHTML")}} | {{domxref("Element.replaceWithHTMLUnsafe", "replaceWithHTMLUnsafe")}} |
+| Add the HTML before the element                | {{domxref("Element.beforeHTML", "beforeHTML")}}           | {{domxref("Element.beforeHTMLUnsafe", "beforeHTMLUnsafe")}}           |
+| Add the HTML as the first child of the element | {{domxref("Element.prependHTML", "prependHTML")}}         | {{domxref("Element.prependHTMLUnsafe", "prependHTMLUnsafe")}}         |
+| Add the HTML as the last child of the element  | {{domxref("Element.appendHTML", "appendHTML")}}           | {{domxref("Element.appendHTMLUnsafe", "appendHTMLUnsafe")}}           |
+| Add the HTML after the element                 | {{domxref("Element.afterHTML", "afterHTML")}}             | {{domxref("Element.afterHTMLUnsafe", "afterHTMLUnsafe")}}             |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
 
 ### Security considerations
 
@@ -120,7 +142,7 @@ target.setHTMLUnsafe(input, { sanitizer: configSafe });
 
 // Removes all XSS-unsafe entities except `onclick`
 const configLessSafe = new Sanitizer();
-config.allowAttribute("onclick");
+configLessSafe.allowAttribute("onclick");
 target.setHTMLUnsafe(input, { sanitizer: configLessSafe });
 ```
 
@@ -317,6 +339,25 @@ With this approach you can create safe HTML, but you aren't forced to.
 
 {{EmbedLiveSample("setHTMLUnsafe() live example","100","450px")}}
 
+### Using setHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString =
+  "<script src='example.js'></script><p>Other content</p>";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// No sanitizer is passed, so the <script> element is kept
+// and also executes the script after insertion.
+target.setHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/api/html_sanitizer_api/index.md b/files/en-us/web/api/html_sanitizer_api/index.md
index 781e73880034e42..232b1a1216de61f 100644
--- a/files/en-us/web/api/html_sanitizer_api/index.md
+++ b/files/en-us/web/api/html_sanitizer_api/index.md
@@ -18,16 +18,33 @@ In particular, [cross-site scripting (XSS) attacks](/en-US/docs/Web/Security/Att
 These attacks can be mitigated by removing unsafe HTML elements and attributes before they are injected into the DOM.
 
 The HTML Sanitizer API provides a number of methods for removing unwanted HTML entities from HTML input before it is injected into the DOM.
-These come in XSS-safe versions that enforce removal of all unsafe elements and attributes, and potentially unsafe versions that give developers full control over the HTML entities that are allowed.
+These come in XSS-safe versions (for example, {{domxref("Element.setHTML()")}}) that enforce removal of all unsafe elements and attributes, and potentially unsafe versions (for example, {{domxref("Element.setHTMLUnsafe()")}}) that give developers full control over the HTML entities that are allowed.
 
 ### Sanitization methods
 
-The HTML Sanitizer API provides XSS-safe and XSS-unsafe methods for injecting HTML strings into an {{domxref('Element')}} or a {{domxref('ShadowRoot')}}, and for parsing HTML into a {{domxref('Document')}}.
+The HTML Sanitizer API provides XSS-safe and XSS-unsafe methods for injecting HTML strings into an {{domxref('Element')}}, a {{domxref('ShadowRoot')}} or {{domxref('CharacterData')}}, and for parsing HTML into a {{domxref('Document')}}.
 
-- Safe methods
-  - : {{domxref('Element.setHTML()')}}, {{domxref('ShadowRoot.setHTML()')}}, and {{domxref('Document/parseHTML_static','Document.parseHTML()')}}.
-- Unsafe methods
-  - : {{domxref('Element.setHTMLUnsafe()')}}, {{domxref('ShadowRoot.setHTMLUnsafe()')}}, and {{domxref('Document/parseHTMLUnsafe_static','Document.parseHTMLUnsafe()')}}.
+#### Safe methods
+
+- {{domxref('Document/parseHTML_static','Document.parseHTML()')}}
+- {{domxref('Element.setHTML()')}} and {{domxref('ShadowRoot.setHTML()')}}
+- {{domxref('Element.appendHTML()')}} and {{domxref('ShadowRoot.appendHTML()')}}
+- {{domxref('Element.prependHTML()')}} and {{domxref('ShadowRoot.prependHTML()')}}
+- {{domxref('Element.afterHTML()')}} and {{domxref('CharacterData.afterHTML()')}}
+- {{domxref('Element.beforeHTML()')}} and {{domxref('CharacterData.beforeHTML()')}}
+- {{domxref('Element.replaceWithHTML()')}} and {{domxref('CharacterData.replaceWithHTML()')}}
+
+#### Unsafe methods
+
+- {{domxref('Document/parseHTMLUnsafe_static','Document.parseHTMLUnsafe()')}}.
+- {{domxref('Element.setHTMLUnsafe()')}}, {{domxref('ShadowRoot.setHTMLUnsafe()')}}
+- {{domxref('Element.appendHTMLUnsafe()')}} and {{domxref('ShadowRoot.appendHTML()')}}
+- {{domxref('Element.prependHTMLUnsafe()')}} and {{domxref('ShadowRoot.prependHTML()')}}
+- {{domxref('Element.afterHTMLUnsafe()')}} and {{domxref('CharacterData.afterHTMLUnsafe()')}}
+- {{domxref('Element.beforeHTMLUnsafe()')}} and {{domxref('CharacterData.beforeHTMLUnsafe()')}}
+- {{domxref('Element.replaceWithHTMLUnsafe()')}} and {{domxref('CharacterData.replaceWithHTMLUnsafe()')}}
+
+#### Difference between Safe and Unsafe methods
 
 All the methods take the HTML to be injected and an optional {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} as arguments.
 The sanitizer object defines the HTML entities that will be filtered out of the input before it is injected.
@@ -254,38 +271,6 @@ They may be useful with the unsafe HTML methods and trusted types, depending on
   - : A dictionary that defines a sanitizer configuration.
     This can be used in the same places as {{domxref('Sanitizer')}} but is likely to be less efficient to use and reuse.
 
-## Extensions to other interfaces
-
-### XSS-safe methods
-
-- {{domxref('Element.setHTML()')}}
-  - : Parse a string of HTML into a subtree of nodes, dropping any elements that are invalid in the context of the element.
-    Then drop any elements and attributes that are not allowed by the sanitizer configuration, and any that are considered XSS-unsafe (even if allowed by the configuration).
-    The subtree is then inserted into the DOM as a subtree of the element.
-- {{domxref('ShadowRoot.setHTML()')}}
-  - : Parse a string of HTML into a subtree of nodes.
-    Then drop any elements and attributes that are not allowed by the sanitizer configuration, and any that are considered XSS-unsafe (even if allowed by the configuration).
-    The subtree is then inserted as a subtree of the `ShadowRoot`.
-- {{domxref('Document/parseHTML_static','Document.parseHTML()')}}
-  - : Parse a string of HTML into a subtree of nodes.
-    Then drop any elements and attributes that are not allowed by the sanitizer configuration, and any that are considered XSS-unsafe (even if allowed by the configuration).
-    The subtree is then set as the root of the {{domxref("Document")}}.
-
-### XSS-unsafe methods
-
-- {{domxref('Element.setHTMLUnsafe()')}}
-  - : Parse a string of HTML into a subtree of nodes, dropping any elements that are invalid in the context of the element.
-    Then drop any elements and attributes that are not allowed by the sanitizer: if no sanitizer is specified allow all elements.
-    The subtree is then inserted into the DOM as a subtree of the element.
-- {{domxref('ShadowRoot.setHTMLUnsafe()')}}
-  - : Parse a string of HTML into a subtree of nodes.
-    Then drop any elements and attributes that are not allowed by the sanitizer: if no sanitizer is specified allow all elements.
-    The subtree is then inserted as a subtree of the `ShadowRoot`.
-- {{domxref('Document/parseHTMLUnsafe_static','Document.parseHTMLUnsafe()')}}
-  - : Parse a string of HTML into a subtree of nodes.
-    Then drop any elements and attributes that are not allowed by the sanitizer: if no sanitizer is specified allow all elements.
-    The subtree is then set as the root of the {{domxref("Document")}}.
-
 ## Examples
 
 The following examples show how to use the sanitizer API using the _default_ sanitizer.
diff --git a/files/en-us/web/api/html_sanitizer_api/using_the_html_sanitizer_api/index.md b/files/en-us/web/api/html_sanitizer_api/using_the_html_sanitizer_api/index.md
index ea724459031a59e..3c28118e49024ea 100644
--- a/files/en-us/web/api/html_sanitizer_api/using_the_html_sanitizer_api/index.md
+++ b/files/en-us/web/api/html_sanitizer_api/using_the_html_sanitizer_api/index.md
@@ -6,7 +6,7 @@ page-type: guide
 
 {{DefaultAPISidebar("HTML Sanitizer API")}}
 
-The [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API) provides methods that allow developers to safely inject untrusted HTML into an {{domxref("Element")}}, a {{domxref("ShadowRoot")}}, or a {{domxref("Document")}}.
+The [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API) provides methods that allow developers to safely inject untrusted HTML into an {{domxref("Element")}}, a {{domxref("ShadowRoot")}}, a {{domxref("CharacterData")}}, or a {{domxref("Document")}}.
 The API also gives developers the flexibility to further restrict or expand what HTML entities are allowed if needed.
 
 ## Safe sanitization by default
@@ -26,7 +26,7 @@ someElement.setHTML(untrustedString);
 console.log(someElement.innerHTML); // abc def
 ```
 
-The other XSS-safe methods, {{domxref('ShadowRoot.setHTML()')}} and {{domxref('Document/parseHTML_static','Document.parseHTML()')}}, are used in the same way.
+The other XSS-safe methods, for example {{domxref('ShadowRoot.setHTML()')}} and {{domxref('Document/parseHTML_static','Document.parseHTML()')}}, are used in the same way.
 
 ## Using a sanitizer configuration
 
@@ -50,7 +50,7 @@ someElement.setHTML(untrustedString, { sanitizer: sanitizerOne });
 ### Allowing unsafe sanitization
 
 Sometimes you might want to inject input that needs to contain potentially unsafe elements or attributes.
-In this case you could use one of the API XSS-unsafe methods: {{domxref('Element.setHTMLUnsafe()')}}, {{domxref('ShadowRoot.setHTMLUnsafe()')}}, and {{domxref('Document/parseHTMLUnsafe_static','Document.parseHTMLUnsafe()')}}.
+In this case you could use one of the API XSS-unsafe methods such as {{domxref('Element.setHTMLUnsafe()')}}, {{domxref('ShadowRoot.setHTMLUnsafe()')}}, and {{domxref('Document/parseHTMLUnsafe_static','Document.parseHTMLUnsafe()')}}.
 
 To somewhat reduce the risk, you might first construct the default sanitizer, which only allows XSS-safe elements, and then allow just those unsafe entities that are expected in the input.
 
diff --git a/files/en-us/web/api/shadowroot/appendhtml/index.md b/files/en-us/web/api/shadowroot/appendhtml/index.md
new file mode 100644
index 000000000000000..c0ae57197ab68c1
--- /dev/null
+++ b/files/en-us/web/api/shadowroot/appendhtml/index.md
@@ -0,0 +1,145 @@
+---
+title: "ShadowRoot: appendHTML() method"
+short-title: appendHTML()
+slug: Web/API/ShadowRoot/appendHTML
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.ShadowRoot.appendHTML
+---
+
+{{APIRef("DOM")}}
+
+The **`appendHTML()`** method of the {{domxref("ShadowRoot")}} interface provides an XSS-safe method to parse and sanitize a string of HTML and insert it into the `ShadowRoot` after the last child of the `ShadowRoot`.
+
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
+
+## Syntax
+
+```js-nolint
+appendHTML(input)
+appendHTML(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A string defining HTML to be sanitized and inserted.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object which defines what elements of the input will be allowed or removed, or the string `"default"` for the default configuration.
+        The method will remove any XSS-unsafe elements and attributes, even if allowed by the sanitizer.
+        If not specified, the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if `options.sanitizer` is passed a:
+    - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+      For example, a configuration that includes both "allowed" and "removed" configuration settings.
+    - string that does not have the value `"default"`.
+    - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+
+## Description
+
+`appendHTML()` drops any elements in the HTML input string that are invalid in the context of the current shadow root host, such as a {{htmlelement("col")}} element outside of a {{htmlelement("table")}}.
+
+It then removes any HTML elements and attributes 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. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+
+If no sanitizer is specified in the `options.sanitizer` parameter, `appendHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
+
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
+
+`appendHTML()` can be used instead of {{domxref("ShadowRoot.setHTML")}} when the HTML needs to insert it into the DOM as the last child of the given shadow root, rather than replacing the whole child HTML of the given element.
+
+It should also be used instead of {{domxref("ShadowRoot.appendHTMLUnsafe()")}}, 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](/en-US/docs/Web/API/Trusted_Types_API).
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("ShadowRoot")}}:
+
+| Action                                             | API                                                  | Unsafe API                                                       |
+| -------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------- |
+| Set the HTML contents of the shadow root           | {{domxref("ShadowRoot.setHTML", "setHTML")}}         | {{domxref("ShadowRoot.setHTMLUnsafe", "setHTMLUnsafe")}}.        |
+| Add the HTML as the first child of the shadow root | {{domxref("ShadowRoot.prependHTML", "prependHTML")}} | {{domxref("ShadowRoot.prependHTMLUnsafe", "prependHTMLUnsafe")}} |
+| Add the HTML as the last child of the shadow root  | {{domxref("ShadowRoot.appendHTML", "appendHTML")}}   | {{domxref("ShadowRoot.appendHTMLUnsafe", "appendHTMLUnsafe")}}   |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+## Examples
+
+> [!NOTE]
+> The [`setHTML()`](/docs/Web/API/Element/setHTML#examples) page includes additional examples, including a live example, which are similar to how `appendHTML()` can be used.
+
+These examples shows some of the ways you can use `appendHTML()` to sanitize and inject a string of HTML.
+
+### Basic usage with default sanitizer
+
+Using the default sanitizer:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.appendHTML(unsanitizedString);
+// Result is that the following is appended to the current shadowroot:
+// <p><i>abc</i> def</p>
+```
+
+### Using a custom sanitizer
+
+Using a custom `Sanitizer`, that allows only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements. Note that {{htmlelement("script")}} is XSS-unsafe, so it will be removed anyway:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+const mySanitizer = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.appendHTML(unsanitizedString, { sanitizer: mySanitizer });
+// Result is that the following is appended to the current shadowroot:
+// <p> def</p>
+```
+
+### Using a custom sanitizer with `removeElements`
+
+Using a custom `SanitizerConfig`, that removes only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements, as well as other XSS-unsafe elements and attributes that are always removed by this method.
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.appendHTML(unsanitizedString, {
+  sanitizer: { removeElements: ["i", "script"] },
+});
+// Result is that the following is appended to the current shadowroot:
+// <p> def</p>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("ShadowRoot.appendHTMLUnsafe()")}}
+- {{domxref("ShadowRoot.appendHTML()")}} and {{domxref("ShadowRoot.appendHTMLUnsafe()")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
+- [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API)
diff --git a/files/en-us/web/api/shadowroot/appendhtmlunsafe/index.md b/files/en-us/web/api/shadowroot/appendhtmlunsafe/index.md
new file mode 100644
index 000000000000000..14c5072cb179770
--- /dev/null
+++ b/files/en-us/web/api/shadowroot/appendhtmlunsafe/index.md
@@ -0,0 +1,250 @@
+---
+title: "ShadowRoot: appendHTMLUnsafe() method"
+short-title: appendHTMLUnsafe()
+slug: Web/API/ShadowRoot/appendHTMLUnsafe
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.ShadowRoot.appendHTMLUnsafe
+---
+
+{{APIRef("DOM")}}
+
+> [!WARNING]
+> This method parses its input as HTML, writing the result into the DOM.
+> APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the input originally came from an attacker.
+>
+> You can mitigate this risk by always passing `TrustedHTML` objects instead of strings and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+> See [Security considerations](#security_considerations) for more information.
+
+> [!NOTE]
+> {{domxref("ShadowRoot.appendHTML()")}} should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.
+
+The **`appendHTMLUnsafe()`** method of the {{domxref("ShadowRoot")}} interface is used to parse HTML input into a {{domxref("DocumentFragment")}}, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and then inserting it into the DOM as the last child of a shadow root.
+
+This is similar to {{domxref("ShadowRoot.setHTMLUnsafe")}} but allows addition of the HTML as the last child of the shadow root, rather than setting the whole child HTML only.
+
+Note that the safe variants of these methods (for example, {{domxref("ShadowRoot.appendHTML")}}) always use the XSS-safe sanitizer, as well as any provided sanitizer parameter. The provided sanitizer is applied in addition to the default XSS-safe sanitizer, whereas with `Unsafe` methods any provided sanitizer is the only sanitizer used.
+
+## Syntax
+
+```js-nolint
+appendHTMLUnsafe(input)
+appendHTMLUnsafe(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A {{domxref("TrustedHTML")}} instance or string defining HTML to be parsed.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object that defines what elements of the input will be allowed or removed.
+        This can also be a string with the value `"default"`, which applies a `Sanitizer` with the (XSS-safe) [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+        If not specified, no sanitizer is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run after inserting. The default is `false`.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if:
+    - `input` is passed a string when [Trusted Types](/en-US/docs/Web/API/Trusted_Types_API) are [enforced by a CSP](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) and no default policy is defined.
+    - `options.sanitizer` is passed a:
+      - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+        For example, a configuration that includes both "allowed" and "removed" configuration settings.
+      - string that does not have the value `"default"`.
+      - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
+
+## Description
+
+The **`appendHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element ({{htmlelement("col")}} element outside of a {{htmlelement("table")}}).
+The `DocumentFragment` is then used to insert it into the DOM as the last child of the given shadow root.
+
+Unlike with {{domxref("ShadowRoot.innerHTML")}}, [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in the input will be parsed into the DOM.
+If the string of HTML defines more than one [declarative shadow root](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in a particular shadow host then only the first {{domxref("ShadowRoot")}} is created — subsequent declarations are parsed as `<template>` elements within that shadow root.
+
+`appendHTMLUnsafe()` doesn't perform any sanitization by default, though also does not run scripts by default. If no sanitizer is passed as a parameter, all HTML entities in the input will be injected. It is therefore potentially even less safe than {{domxref("ShadowRoot.innerHTML")}}, which does not allow {{htmlelement("script")}} execution when parsing.
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("ShadowRoot")}}:
+
+| Action                                             | API                                                  | Unsafe API                                                       |
+| -------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------- |
+| Set the HTML contents of the shadow root           | {{domxref("ShadowRoot.setHTML", "setHTML")}}         | {{domxref("ShadowRoot.setHTMLUnsafe", "setHTMLUnsafe")}}.        |
+| Add the HTML as the first child of the shadow root | {{domxref("ShadowRoot.prependHTML", "prependHTML")}} | {{domxref("ShadowRoot.prependHTMLUnsafe", "prependHTMLUnsafe")}} |
+| Add the HTML as the last child of the shadow root  | {{domxref("ShadowRoot.appendHTML", "appendHTML")}}   | {{domxref("ShadowRoot.appendHTMLUnsafe", "appendHTMLUnsafe")}}   |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+### Security considerations
+
+The suffix "Unsafe" in the method name indicates that it does not enforce removal of all XSS-unsafe HTML entities (unlike {{domxref("ShadowRoot.appendHTML()")}}).
+While it can do so if used with an appropriate sanitizer, it doesn't have to use an effective sanitizer, or any sanitizer at all!
+The method is therefore a possible vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized.
+
+You should mitigate this risk by always passing {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
+This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup (such as {{htmlelement("script")}} elements and event handler attributes), before it is injected.
+
+Using `TrustedHTML` makes it possible to audit and check that sanitization code is effective in just a few places, rather than scattered across all your injection sinks.
+You should not have to pass a sanitizer to the method when using `TrustedHTML`.
+
+If for any reason you can't use `TrustedHTML` (or even better, `appendHTML()`) then the next safest option is to use `appendHTMLUnsafe()` with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+
+### When should `appendHTMLUnsafe()` be used?
+
+`appendHTMLUnsafe()` should almost never be used if {{domxref("ShadowRoot.appendHTML()")}} is available, because there are very few (if any) cases where user-provided HTML input should need to include XSS-unsafe elements.
+Not only is `appendHTML()` safe, but it avoids having to consider trusted types.
+
+Using `appendHTMLUnsafe()` might be appropriate if:
+
+- You can't use `appendHTML()` or trusted types (for whatever reason) and you want to have the safest possible filtering.
+  In this case you might use `appendHTMLUnsafe()` with the default {{domxref("Sanitizer")}} to filter all XSS-unsafe elements.
+- You can't use `appendHTML()` and the input might contain declarative shadow roots, so you can't use {{domxref("ShadowRoot.innerHTML")}}.
+- You have an edge case where you have to allow HTML input that includes a known set of unsafe HTML entities.
+
+  You can't use `appendHTML()` in this case, because it strips all unsafe entities.
+  You could use `appendHTMLUnsafe()` without a sanitizer or `innerHTML`, but that would allow all unsafe entities.
+
+  A better option here is to call `appendHTMLUnsafe()` with a sanitizer that allows just those dangerous elements and attributes we actually need.
+  While this is still unsafe, it is safer than allowing all of them.
+
+For the last point, consider a situation where your code relies on being able to use unsafe `onclick` handlers.
+The following code shows the effect of the different methods and sanitizers for this case.
+
+```js
+const target = document.querySelector("#target");
+
+const input = "<img src=x onclick=alert('onclick') onerror=alert('onerror')>";
+
+// Safe - removes all XSS-unsafe entities.
+target.appendHTML(input);
+
+// Removes no event handler attributes
+target.appendHTMLUnsafe(input);
+
+// Safe - removes all XSS-unsafe entities.
+const configSafe = new Sanitizer();
+target.appendHTMLUnsafe(input, { sanitizer: configSafe });
+
+// Removes all XSS-unsafe entities except `onclick`
+const configLessSafe = new Sanitizer();
+configLessSafe.allowAttribute("onclick");
+target.appendHTMLUnsafe(input, { sanitizer: configLessSafe });
+```
+
+## Examples
+
+> [!NOTE]
+> The [`setHTMLUnsafe()`](/docs/Web/API/Element/setHTMLUnsafe#examples) page includes additional examples, including a live example, which are similar to how `appendHTMLUnsafe()` can be used.
+
+### appendHTMLUnsafe() with Trusted Types
+
+To mitigate the risk of XSS, we'll first create a `TrustedHTML` object from the string containing the HTML, and then pass that object to `appendHTMLUnsafe()`.
+Since trusted types are not yet supported on all browsers, we define the [trusted types tinyfill](/en-US/docs/Web/API/Trusted_Types_API#trusted_types_tinyfill).
+This acts as a transparent replacement for the Trusted Types JavaScript API:
+
+```js
+if (typeof trustedTypes === "undefined")
+  trustedTypes = { createPolicy: (n, rules) => rules };
+```
+
+Next we create a {{domxref("TrustedTypePolicy")}} that defines a {{domxref("TrustedTypePolicy/createHTML", "createHTML()")}} for transforming an input string into {{domxref("TrustedHTML")}} instances.
+Commonly implementations of `createHTML()` use a library such as [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the input as shown below:
+
+```js
+const policy = trustedTypes.createPolicy("my-policy", {
+  createHTML: (input) => DOMPurify.sanitize(input),
+});
+```
+
+Then we use this `policy` object to create a `TrustedHTML` object from the potentially unsafe input string:
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+// Create a TrustedHTML instance using the policy
+const trustedHTML = policy.createHTML(untrustedString);
+```
+
+Now that we have `trustedHTML`, the code below shows how you can use it with `appendHTMLUnsafe()`.
+The input has been through the transformation function, so we don't pass a sanitizer to the method.
+
+```js
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// appendHTMLUnsafe() with no sanitizer
+target.appendHTMLUnsafe(trustedHTML);
+```
+
+### Using appendHTMLUnsafe() without Trusted Types
+
+This example demonstrates the case where we aren't using trusted types, so we'll be passing sanitizer arguments.
+
+The code creates an untrusted string and shows a number of ways a sanitizer can be passed to the method.
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// Define custom Sanitizer and use in appendHTMLUnsafe()
+// This allows only elements: div, p, button, script
+const sanitizer1 = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.appendHTMLUnsafe(untrustedString, { sanitizer: sanitizer1 });
+
+// Define custom SanitizerConfig within appendHTMLUnsafe()
+// Removes the <script> element but allows other potentially unsafe entities.
+target.appendHTMLUnsafe(untrustedString, {
+  sanitizer: { removeElements: ["script"] },
+});
+```
+
+### Using appendHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString =
+  "<script src='example.js'></script><p>Other content</p>";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// No sanitizer is passed, so the <script> element is kept
+// and also executes the script after insertion.
+target.appendHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("ShadowRoot.appendHTML()")}}
+- {{domxref("ShadowRoot.appendHTML()")}} and {{domxref("ShadowRoot.appendHTMLUnsafe()")}}
+- {{domxref("ShadowRoot.setHTMLUnsafe()")}}
+- {{domxref("ShadowRoot.innerHTML")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
diff --git a/files/en-us/web/api/shadowroot/prependhtml/index.md b/files/en-us/web/api/shadowroot/prependhtml/index.md
new file mode 100644
index 000000000000000..3cd46629ac83ff5
--- /dev/null
+++ b/files/en-us/web/api/shadowroot/prependhtml/index.md
@@ -0,0 +1,147 @@
+---
+title: "ShadowRoot: prependHTML() method"
+short-title: prependHTML()
+slug: Web/API/ShadowRoot/prependHTML
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.ShadowRoot.prependHTML
+---
+
+{{APIRef("DOM")}}
+
+The **`prependHTML()`** method of the {{domxref("ShadowRoot")}} interface provides an XSS-safe method to parse and sanitize a string of HTML and insert it into the `ShadowRoot` before the first child of the `ShadowRoot`.
+
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
+
+This is similar to {{domxref("ShadowRoot.setHTML")}} but allows addition of new HTML as the first child of the shadow root, rather than setting the whole child HTML only.
+
+## Syntax
+
+```js-nolint
+prependHTML(input)
+prependHTML(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A string defining HTML to be sanitized and inserted.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object which defines what elements of the input will be allowed or removed, or the string `"default"` for the default configuration.
+        The method will remove any XSS-unsafe elements and attributes, even if allowed by the sanitizer.
+        If not specified, the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if `options.sanitizer` is passed a:
+    - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+      For example, a configuration that includes both "allowed" and "removed" configuration settings.
+    - string that does not have the value `"default"`.
+    - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+
+## Description
+
+`prependHTML()` drops any elements in the HTML input string that are invalid in the context of the current shadow root, such as a {{htmlelement("col")}} element outside of a {{htmlelement("table")}}.
+
+It then removes any HTML elements and attributes 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. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+
+If no sanitizer is specified in the `options.sanitizer` parameter, `prependHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
+
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
+
+`prependHTML()` can be used instead of {{domxref("ShadowRoot.setHTML")}} when the HTML needs to insert it into the DOM as the first child of the given shadow root, rather than replacing the whole child HTML of the given shadow root.
+
+It should also be used instead of {{domxref("ShadowRoot.prependHTMLUnsafe()")}}, 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](/en-US/docs/Web/API/Trusted_Types_API).
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("ShadowRoot")}}:
+
+| Action                                             | API                                                  | Unsafe API                                                       |
+| -------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------- |
+| Set the HTML contents of the shadow root           | {{domxref("ShadowRoot.setHTML", "setHTML")}}         | {{domxref("ShadowRoot.setHTMLUnsafe", "setHTMLUnsafe")}}.        |
+| Add the HTML as the first child of the shadow root | {{domxref("ShadowRoot.prependHTML", "prependHTML")}} | {{domxref("ShadowRoot.prependHTMLUnsafe", "prependHTMLUnsafe")}} |
+| Add the HTML as the last child of the shadow root  | {{domxref("ShadowRoot.appendHTML", "appendHTML")}}   | {{domxref("ShadowRoot.appendHTMLUnsafe", "appendHTMLUnsafe")}}   |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+## Examples
+
+> [!NOTE]
+> The [`setHTML()`](/docs/Web/API/Element/setHTML#examples) page includes additional examples, including a live example, which are similar to how `prependHTML()` can be used.
+
+These examples shows some of the ways you can use `prependHTML()` to sanitize and inject a string of HTML.
+
+### Basic usage with default sanitizer
+
+Using the default sanitizer:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.prependHTML(unsanitizedString);
+// Result is that the following is prepended to the current shadowroot:
+// <p><i>abc</i> def</p>
+```
+
+### Using a custom sanitizer
+
+Using a custom `Sanitizer`, that allows only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements. Note that {{htmlelement("script")}} is XSS-unsafe, so it will be removed anyway:
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+const mySanitizer = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.prependHTML(unsanitizedString, { sanitizer: mySanitizer });
+// Result is that the following is prepended to the current shadowroot:
+// <p> def</p>
+```
+
+### Using a custom sanitizer with `removeElements`
+
+Using a custom `SanitizerConfig`, that removes only the {{htmlelement("div")}}, {{htmlelement("p")}}, {{htmlelement("button")}}, and {{htmlelement("script")}} elements, as well as other XSS-unsafe elements and attributes that are always removed by this method.
+
+```js
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
+const target = document.getElementById("target");
+
+target.prependHTML(unsanitizedString, {
+  sanitizer: { removeElements: ["i", "script"] },
+});
+// Result is that the following is prepended to the current shadowroot:
+// <p> def</p>
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("ShadowRoot.prependHTMLUnsafe()")}}
+- {{domxref("ShadowRoot.prependHTML()")}} and {{domxref("ShadowRoot.prependHTMLUnsafe()")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
+- [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API)
diff --git a/files/en-us/web/api/shadowroot/prependhtmlunsafe/index.md b/files/en-us/web/api/shadowroot/prependhtmlunsafe/index.md
new file mode 100644
index 000000000000000..b6ae1882ca792a6
--- /dev/null
+++ b/files/en-us/web/api/shadowroot/prependhtmlunsafe/index.md
@@ -0,0 +1,249 @@
+---
+title: "ShadowRoot: prependHTMLUnsafe() method"
+short-title: prependHTMLUnsafe()
+slug: Web/API/ShadowRoot/prependHTMLUnsafe
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.ShadowRoot.prependHTMLUnsafe
+---
+
+{{APIRef("DOM")}}
+
+> [!WARNING]
+> This method parses its input as HTML, writing the result into the DOM.
+> APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the input originally came from an attacker.
+>
+> You can mitigate this risk by always passing `TrustedHTML` objects instead of strings and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+> See [Security considerations](#security_considerations) for more information.
+
+> [!NOTE]
+> {{domxref("ShadowRoot.prependHTML()")}} should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.
+
+The **`prependHTMLUnsafe()`** method of the {{domxref("ShadowRoot")}} interface is used to parse HTML input into a {{domxref("DocumentFragment")}}, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and then inserting it into the DOM as the first child of a shadow root.
+
+This is similar to {{domxref("ShadowRoot.setHTMLUnsafe")}} but allows addition of the HTML as the first child of the shadow root, rather than setting the whole child HTML only.
+
+Note that the safe variants of these methods (for example, {{domxref("ShadowRoot.prependHTML")}}) always use the XSS-safe sanitizer, as well as any provided sanitizer parameter. The provided sanitizer is applied in addition to the default XSS-safe sanitizer, whereas with `Unsafe` methods any provided sanitizer is the only sanitizer used.
+
+## Syntax
+
+```js-nolint
+prependHTMLUnsafe(input)
+prependHTMLUnsafe(input, options)
+```
+
+### Parameters
+
+- `input` {{experimental_inline}}
+  - : A {{domxref("TrustedHTML")}} instance or string defining HTML to be parsed.
+- `options` {{optional_inline}} {{experimental_inline}}
+  - : An options object with the following optional parameters:
+    - `sanitizer` {{optional_inline}} {{experimental_inline}}
+      - : A {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} object that defines what elements of the input will be allowed or removed.
+        This can also be a string with the value `"default"`, which applies a `Sanitizer` with the (XSS-safe) [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+        If not specified, no sanitizer is used.
+
+        Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run after inserting. The default is `false`.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- {{jsxref("TypeError")}} {{experimental_inline}}
+  - : This is thrown if:
+    - `input` is passed a string when [Trusted Types](/en-US/docs/Web/API/Trusted_Types_API) are [enforced by a CSP](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) and no default policy is defined.
+    - `options.sanitizer` is passed a:
+      - {{domxref("SanitizerConfig")}} that isn't [valid](/en-US/docs/Web/API/SanitizerConfig#valid_configuration).
+        For example, a configuration that includes both "allowed" and "removed" configuration settings.
+      - string that does not have the value `"default"`.
+      - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
+
+## Description
+
+The **`prependHTMLUnsafe()`** method is used to parse an HTML input into a {{domxref("DocumentFragment")}}, optionally sanitizing it of unwanted elements and attributes, and discarding elements that the HTML specification doesn't allow in the target element ({{htmlelement("col")}} element outside of a {{htmlelement("table")}}).
+The `DocumentFragment` is then used to insert it into the DOM as the first child of the given shadow root.
+
+Unlike with {{domxref("ShadowRoot.innerHTML")}}, [declarative shadow roots](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in the input will be parsed into the DOM.
+If the string of HTML defines more than one [declarative shadow root](/en-US/docs/Web/HTML/Reference/Elements/template#declarative_shadow_dom) in a particular shadow host then only the first {{domxref("ShadowRoot")}} is created — subsequent declarations are parsed as `<template>` elements within that shadow root.
+
+`prependHTMLUnsafe()` doesn't perform any sanitization by default, though also does not run scripts by default. If no sanitizer is passed as a parameter, all HTML entities in the input will be injected. It is therefore potentially even less safe than {{domxref("ShadowRoot.innerHTML")}}, which does not allow {{htmlelement("script")}} execution when parsing.
+
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("ShadowRoot")}}:
+
+| Action                                             | API                                                  | Unsafe API                                                       |
+| -------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------- |
+| Set the HTML contents of the shadow root           | {{domxref("ShadowRoot.setHTML", "setHTML")}}         | {{domxref("ShadowRoot.setHTMLUnsafe", "setHTMLUnsafe")}}.        |
+| Add the HTML as the first child of the shadow root | {{domxref("ShadowRoot.prependHTML", "prependHTML")}} | {{domxref("ShadowRoot.prependHTMLUnsafe", "prependHTMLUnsafe")}} |
+| Add the HTML as the last child of the shadow root  | {{domxref("ShadowRoot.appendHTML", "appendHTML")}}   | {{domxref("ShadowRoot.appendHTMLUnsafe", "appendHTMLUnsafe")}}   |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
+### Security considerations
+
+The suffix "Unsafe" in the method name indicates that it does not enforce removal of all XSS-unsafe HTML entities (unlike {{domxref("ShadowRoot.prependHTML()")}}).
+While it can do so if used with an appropriate sanitizer, it doesn't have to use an effective sanitizer, or any sanitizer at all!
+The method is therefore a possible vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, where potentially unsafe strings provided by a user are injected into the DOM without first being sanitized.
+
+You should mitigate this risk by always passing {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
+This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup (such as {{htmlelement("script")}} elements and event handler attributes), before it is injected.
+
+Using `TrustedHTML` makes it possible to audit and check that sanitization code is effective in just a few places, rather than scattered across all your injection sinks.
+You should not have to pass a sanitizer to the method when using `TrustedHTML`.
+
+If for any reason you can't use `TrustedHTML` (or even better, `prependHTML()`) then the next safest option is to use `prependHTMLUnsafe()` with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
+
+### When should `prependHTMLUnsafe()` be used?
+
+`prependHTMLUnsafe()` should almost never be used if {{domxref("ShadowRoot.prependHTML()")}} is available, because there are very few (if any) cases where user-provided HTML input should need to include XSS-unsafe elements.
+Not only is `prependHTML()` safe, but it avoids having to consider trusted types.
+
+Using `prependHTMLUnsafe()` might be appropriate if:
+
+- You can't use `prependHTML()` or trusted types (for whatever reason) and you want to have the safest possible filtering.
+  In this case you might use `prependHTMLUnsafe()` with the default {{domxref("Sanitizer")}} to filter all XSS-unsafe elements.
+- You can't use `prependHTML()` and the input might contain declarative shadow roots, so you can't use {{domxref("ShadowRoot.innerHTML")}}.
+- You have an edge case where you have to allow HTML input that includes a known set of unsafe HTML entities.
+
+  You can't use `prependHTML()` in this case, because it strips all unsafe entities.
+  You could use `prependHTMLUnsafe()` without a sanitizer or `innerHTML`, but that would allow all unsafe entities.
+
+  A better option here is to call `prependHTMLUnsafe()` with a sanitizer that allows just those dangerous elements and attributes we actually need.
+  While this is still unsafe, it is safer than allowing all of them.
+
+For the last point, consider a situation where your code relies on being able to use unsafe `onclick` handlers.
+The following code shows the effect of the different methods and sanitizers for this case.
+
+```js
+const target = document.querySelector("#target");
+
+const input = "<img src=x onclick=alert('onclick') onerror=alert('onerror')>";
+
+// Safe - removes all XSS-unsafe entities.
+target.prependHTML(input);
+
+// Removes no event handler attributes
+target.prependHTMLUnsafe(input);
+
+// Safe - removes all XSS-unsafe entities.
+const configSafe = new Sanitizer();
+target.prependHTMLUnsafe(input, { sanitizer: configSafe });
+
+// Removes all XSS-unsafe entities except `onclick`
+const configLessSafe = new Sanitizer();
+configLessSafe.allowAttribute("onclick");
+target.prependHTMLUnsafe(input, { sanitizer: configLessSafe });
+```
+
+## Examples
+
+> [!NOTE]
+> The [`setHTMLUnsafe()`](/docs/Web/API/Element/setHTMLUnsafe#examples) page includes additional examples, including a live example, which are similar to how `prependHTMLUnsafe()` can be used.
+
+### prependHTMLUnsafe() with Trusted Types
+
+To mitigate the risk of XSS, we'll first create a `TrustedHTML` object from the string containing the HTML, and then pass that object to `prependHTMLUnsafe()`.
+Since trusted types are not yet supported on all browsers, we define the [trusted types tinyfill](/en-US/docs/Web/API/Trusted_Types_API#trusted_types_tinyfill).
+This acts as a transparent replacement for the Trusted Types JavaScript API:
+
+```js
+if (typeof trustedTypes === "undefined")
+  trustedTypes = { createPolicy: (n, rules) => rules };
+```
+
+Next we create a {{domxref("TrustedTypePolicy")}} that defines a {{domxref("TrustedTypePolicy/createHTML", "createHTML()")}} for transforming an input string into {{domxref("TrustedHTML")}} instances.
+Commonly implementations of `createHTML()` use a library such as [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the input as shown below:
+
+```js
+const policy = trustedTypes.createPolicy("my-policy", {
+  createHTML: (input) => DOMPurify.sanitize(input),
+});
+```
+
+Then we use this `policy` object to create a `TrustedHTML` object from the potentially unsafe input string:
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+// Create a TrustedHTML instance using the policy
+const trustedHTML = policy.createHTML(untrustedString);
+```
+
+Now that we have `trustedHTML`, the code below shows how you can use it with `prependHTMLUnsafe()`.
+The input has been through the transformation function, so we don't pass a sanitizer to the method.
+
+```js
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// prependHTMLUnsafe() with no sanitizer
+target.prependHTMLUnsafe(trustedHTML);
+```
+
+### Using prependHTMLUnsafe() without Trusted Types
+
+This example demonstrates the case where we aren't using trusted types, so we'll be passing sanitizer arguments.
+
+The code creates an untrusted string and shows a number of ways a sanitizer can be passed to the method.
+
+```js
+// The potentially malicious string
+const untrustedString = "abc <script>alert(1)<" + "/script> def";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// Define custom Sanitizer and use in prependHTMLUnsafe()
+// This allows only elements: div, p, button, script
+const sanitizer1 = new Sanitizer({
+  elements: ["div", "p", "button", "script"],
+});
+target.prependHTMLUnsafe(untrustedString, { sanitizer: sanitizer1 });
+
+// Define custom SanitizerConfig within prependHTMLUnsafe()
+// Removes the <script> element but allows other potentially unsafe entities.
+target.prependHTMLUnsafe(untrustedString, {
+  sanitizer: { removeElements: ["script"] },
+});
+```
+
+### Using prependHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString =
+  "<script src='example.js'></script><p>Other content</p>";
+
+// Get the target Element with id "target"
+const target = document.getElementById("target");
+
+// No sanitizer is passed, so the <script> element is kept and also executes it after insertion.
+target.prependHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("ShadowRoot.prependHTML()")}}
+- {{domxref("ShadowRoot.prependHTML()")}} and {{domxref("ShadowRoot.prependHTMLUnsafe()")}}
+- {{domxref("ShadowRoot.setHTMLUnsafe()")}}
+- {{domxref("ShadowRoot.innerHTML")}}
+- {{domxref("Document.parseHTML_static", "Document.parseHTML()")}} and {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
diff --git a/files/en-us/web/api/shadowroot/sethtml/index.md b/files/en-us/web/api/shadowroot/sethtml/index.md
index 61608016c328d0d..980bc69b0299080 100644
--- a/files/en-us/web/api/shadowroot/sethtml/index.md
+++ b/files/en-us/web/api/shadowroot/sethtml/index.md
@@ -10,8 +10,8 @@ browser-compat: api.ShadowRoot.setHTML
 
 The **`setHTML()`** method of the {{domxref("ShadowRoot")}} interface provides an XSS-safe method to parse and sanitize a string of HTML, which then replaces the existing tree in the Shadow DOM.
 
-The method removes any elements and attributes that are considered XSS-unsafe, even if allowed by a passed sanitizer.
-Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{SVGElement("use")}}, and event handler attributes.
+The method removes any elements and attributes that are considered XSS-unsafe, even if the caller passes a [sanitizer](#sanitizer) option which allows them. For more information see the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API).
+Notably, the following elements are always removed: {{HTMLElement("script")}}, {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("base")}}, {{SVGElement("use")}}, as well event handler content attributes (for example, `onclick`, `onload`, `onerror` and so forth). See [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration) for more information.
 
 It is recommended (if supported) as a drop-in replacement for {{domxref("ShadowRoot.innerHTML")}} when setting a user-provided string of HTML.
 
@@ -57,7 +57,7 @@ The **`setHTML()`** method provides an XSS-safe method to parse and sanitize a s
 If no sanitizer is specified in the `options.sanitizer` parameter, `setHTML()` is used with the [default sanitizer configuration](/en-US/docs/Web/API/HTML_Sanitizer_API/Default_sanitizer_configuration).
 This configuration is suitable for the majority of use cases as it prevents XSS attacks, as well as other attacks like clickjacking or spoofing.
 
-A custom `Sanitizer` or `SanitizerConfig` can be specified to choose which elements, attributes, and comments are allowed or removed.
+A custom {{domxref("Sanitizer")}} or {{domxref("SanitizerConfig")}} 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, they will still be removed when using this method (it removes the same elements as a sanitizer on which {{domxref('Sanitizer.removeUnsafe()')}} has been called).
 
 `setHTML()` should be used instead of {{domxref("ShadowRoot.innerHTML")}} for inserting untrusted strings of HTML into the shadow DOM.
@@ -65,8 +65,22 @@ It should also be used instead of {{domxref("ShadowRoot.setHTMLUnsafe()")}}, unl
 
 Note that since this method always sanitizes input strings of XSS-unsafe entities, it is not secured or validated using the [Trusted Types API](/en-US/docs/Web/API/Trusted_Types_API).
 
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("ShadowRoot")}}:
+
+| Action                                             | API                                                  | Unsafe API                                                       |
+| -------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------- |
+| Set the HTML contents of the shadow root           | {{domxref("ShadowRoot.setHTML", "setHTML")}}         | {{domxref("ShadowRoot.setHTMLUnsafe", "setHTMLUnsafe")}}.        |
+| Add the HTML as the first child of the shadow root | {{domxref("ShadowRoot.prependHTML", "prependHTML")}} | {{domxref("ShadowRoot.prependHTMLUnsafe", "prependHTMLUnsafe")}} |
+| Add the HTML as the last child of the shadow root  | {{domxref("ShadowRoot.appendHTML", "appendHTML")}}   | {{domxref("ShadowRoot.appendHTMLUnsafe", "appendHTMLUnsafe")}}   |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
 ## Examples
 
+These examples shows some of the ways you can use `setHTML()` to sanitize and inject a string of HTML.
+
 ### Basic usage
 
 This example shows some of the ways you can use `setHTML()` to sanitize and inject a string of HTML.
@@ -92,7 +106,7 @@ The code below shows how we can call `setHTML()` with a string and different san
 
 ```js
 // Define unsanitized string of HTML
-const unsanitizedString = "abc <script>alert(1)<" + "/script> def";
+const unsanitizedString = "<p><i>abc</i><script>alert(1)<" + "/script> def</p>";
 
 // setHTML() with default sanitizer
 shadow.setHTML(unsanitizedString);
diff --git a/files/en-us/web/api/shadowroot/sethtmlunsafe/index.md b/files/en-us/web/api/shadowroot/sethtmlunsafe/index.md
index 68caea892f870d6..8a9a6212d6b6904 100644
--- a/files/en-us/web/api/shadowroot/sethtmlunsafe/index.md
+++ b/files/en-us/web/api/shadowroot/sethtmlunsafe/index.md
@@ -39,6 +39,8 @@ setHTMLUnsafe(input, options)
         If not specified, no sanitizer is used.
 
         Note that if you're using the same configuration multiple times, it's expected to be more efficient to use a `Sanitizer` and modify it when you need to.
+    - `runScripts` {{optional_inline}} {{experimental_inline}}
+      - : A boolean value indicating whether any scripts included in the newly inserted HTML should run after inserting. The default is `false`.
 
 ### Return value
 
@@ -54,6 +56,7 @@ None (`undefined`).
         For example, a configuration that includes both "allowed" and "removed" configuration settings.
       - string that does not have the value `"default"`.
       - value that is not a {{domxref("Sanitizer")}}, {{domxref("SanitizerConfig")}}, or string.
+    - `options.runScripts` is `true` or `options.sanitizer` is specified when Trusted Types are enforced and no default policy defines `createParserOptions` — even if input is a `TrustedHTML`. (Passing a `TrustedHTMLParserOptions` as options avoids this.)
 
 ## Description
 
@@ -65,6 +68,18 @@ If the string of HTML defines more than one [declarative shadow root](/en-US/doc
 `setHTMLUnsafe()` doesn't perform any sanitization by default.
 If no sanitizer is passed as a parameter, all HTML entities in the input will be injected.
 
+### Related HTML setter APIs
+
+This is part of a series of APIs to set HTML in {{domxref("ShadowRoot")}}:
+
+| Action                                             | API                                                  | Unsafe API                                                       |
+| -------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------- |
+| Set the HTML contents of the shadow root           | {{domxref("ShadowRoot.setHTML", "setHTML")}}         | {{domxref("ShadowRoot.setHTMLUnsafe", "setHTMLUnsafe")}}.        |
+| Add the HTML as the first child of the shadow root | {{domxref("ShadowRoot.prependHTML", "prependHTML")}} | {{domxref("ShadowRoot.prependHTMLUnsafe", "prependHTMLUnsafe")}} |
+| Add the HTML as the last child of the shadow root  | {{domxref("ShadowRoot.appendHTML", "appendHTML")}}   | {{domxref("ShadowRoot.appendHTMLUnsafe", "appendHTMLUnsafe")}}   |
+
+Each API type takes the same arguments but allows for ease of inserting the required HTML in the appropriate place and with or without the default sanitizer applied. The unsafe variants allows scripts to be run using the `runScripts` options.
+
 ### Security considerations
 
 The suffix "Unsafe" in the method name indicates that it does not enforce removal of all XSS-unsafe HTML entities (unlike {{domxref("ShadowRoot.setHTML()")}}).
@@ -118,7 +133,7 @@ shadow.setHTMLUnsafe(input, { sanitizer: configSafe });
 
 // Removes all XSS-unsafe entities except `onclick`
 const configLessSafe = new Sanitizer();
-config.allowAttribute("onclick");
+configLessSafe.allowAttribute("onclick");
 shadow.setHTMLUnsafe(input, { sanitizer: configLessSafe });
 ```
 
@@ -332,6 +347,25 @@ With this approach you can create safe HTML, but you aren't forced to.
 
 {{EmbedLiveSample("setHTMLUnsafe() live example","100","450px")}}
 
+### Using setHTMLUnsafe() with `runScripts`
+
+This example demonstrates the case when we allow scripts to run using the `runScripts` option.
+
+```js
+// The potentially malicious string
+const untrustedString =
+  "<script src='example.js'></script><p>Other content</p>";
+
+// Get the shadow root element
+const shadow = document.querySelector("#host").shadowRoot;
+
+// No sanitizer is passed, so the <script> element is kept
+// and also executes the script after insertion.
+shadow.setHTMLUnsafe(untrustedString, {
+  runScripts: true,
+});
+```
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/html/reference/elements/template/index.md b/files/en-us/web/html/reference/elements/template/index.md
index 09d11cd13655e2b..f8ea8b2b8582900 100644
--- a/files/en-us/web/html/reference/elements/template/index.md
+++ b/files/en-us/web/html/reference/elements/template/index.md
@@ -72,7 +72,9 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
 
 ## Usage notes
 
-This element has no permitted content, because everything nested inside it in the HTML source does not actually become the children of the `<template>` element. The {{domxref("Node.childNodes")}} property of the `<template>` element is always empty, and you can only access said nested content via the special {{domxref("HTMLTemplateElement.content", "content")}} property. However, if you call {{domxref("Node.appendChild()")}} or similar methods on the `<template>` element, then you would be inserting children into the `<template>` element itself, which is a violation of its content model and does not actually update the {{domxref("DocumentFragment")}} returned by the `content` property.
+This element has no permitted content, because everything nested inside it in the HTML source does not actually become the children of the `<template>` element. The {{domxref("Node.childNodes")}} property of the `<template>` element is always empty, and you can only access said nested content via the special {{domxref("HTMLTemplateElement.content", "content")}} property.
+
+If you call {{domxref("Node.appendChild()")}} or similar methods on the `<template>` element, then you would be inserting children into the `<template>` element itself, which is a violation of its content model and does not actually update the {{domxref("DocumentFragment")}} returned by the `content` property. However if you use the HTML methods (for example, {{domxref("Element.appendHTML()")}}), then these will be correctly applied to the `content`.
 
 Due to the way the `<template>` element is parsed, all `<html>`, `<head>`, and `<body>` opening and closing tags inside the template are syntax errors and are ignored by the parser, so `<template><head><title>Test</title></head></template>` is the same as `<template><title>Test</title></template>`.