@kanmf/dombuilder

HTML Dom building library

🏠 Homepage

Run tests

npm run test

Usage

Basic usage is makeElement(type, textOrPropsOrChild, ...otherChildren)

Add a div element to the body dom. Add an anchor element with a span containing text.

import { div, span, makeElement } from "@kanmf/dombuilder";

document.body.appendChild(div());
document.body.appendChild(makeElement('a', {href: 'http://foo.bar', span('text')}));

Builtin exports: a, button, div, p, span, ul, li, input, label, style, slot, table, tr, td, th. For non explicit elements use makeElement.

import { makeElement } from "@kanmf/dombuilder";

const br = makeElement("br");
const br = makeElement("hr");

Build a card with a link and dataset property.

const card = div(
  { className: "card-container" },
  a(
    {
      id: "card-link-foo",
      href: `https://foo.bar`,
      dataset: {
        isValid: true,
      },
    },
    "link text"
  )
);

Resulting in:

<div class="card-container">
  <a href="https://foo.bar" id="card-link-foo" data-is-valid="true">
    link text
  </a>
</div>

Author

• Github: @aaronmars
• Github: @apatten
• Github: @spencerkittleson

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2022.
This project is MIT licensed.