hast-util-to-dom

hast-util-to-dom

hast utility to transform to a DOM tree.

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

npm:

npm install hast-util-to-dom

Use

This utility is intended for browser use!

import {toDom} from 'hast-util-to-dom';

const el = toDom({
  type: 'element',
  tagName: 'h1',
  properties: {},
  children: [{type: 'text', value: 'World!'}]
});

console.log(el);

This will create a DOM node like this:

<h1>World!</h1>

If you want a string of HTML, you have a few options:

// Outer HTML, eg. if you want an entire fragment
console.log(el.outerHTML);
// "<h1>World</h1>"

// Inner HTML, eg. if you have a wrapping element you don't need
console.log(el.innerHTML);
// "World"

// Full serialization, eg. when you want the whole document
console.log(new XMLSerializer().serializeToString(el));
// "<div xmlns="http://www.w3.org/1999/xhtml">World</div>"

Due to the nature of various browser implementations, you may notice cross-browser differences in the serialized output, especially with respect to whitespace or self-closing tags. Buddy, that’s the web!

API

This package exports the following identifiers: toDom. There is no default export.

toDom(node[, options])

Transform a hast tree to a DOM tree.

options

options.fragment

Whether a DOM fragment should be returned (default: false).

options.document

Document interface to use (default: globalThis.document).

options.namespace

namespace to use to create elements.

options.afterTransform

Function called when a hast node is transformed into a DOM node (Function?). Given the hast node that was handled as the first parameter and the corresponding DOM node as the second parameter.

Security

Use of hast-util-to-dom can open you up to a cross-site scripting (XSS) attack if the hast tree is unsafe. Use hast-util-santize to make the hast tree safe.

Related

• hast-util-sanitize — Sanitize hast nodes
• hast-util-to-html — Create an HTML string
• hast-util-from-dom — Create a hast tree from a DOM tree

Contribute

See contributing.md in syntax-tree/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

ISC © Keith McKnight