hast utility to transform to a DOM tree.

yarn:

yarn add hast-util-to-dom

npm:

npm install hast-util-to-dom

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!

Transform a hast tree to a DOM tree.

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

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

namespace to use to create elements.

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.

• 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

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, organisation, or community you agree to abide by its terms.

ISC © Keith McKnight