hast-util-to-dom

hast-util-to-dom

hast utility to transform to a DOM tree.

Install

yarn:

yarn add hast-util-to-dom

npm:

npm install hast-util-to-dom

Usage

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

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: global.document).

options.namespace

namespace to use to create elements.

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

License

ISC © Keith McKnight