DOM-Create-Element - README

• DOM-Create-Element - README
  • Introduction
  • Get started
  • Features
  • Example Usage
  • Repository
  • Report an issue?
  • License

Introduction

• DOM-Create-Element is a utility project that aims to provide a enhanced version of createElement() and createElementNS() of DOM with easier and quicker access.

Get started

• Import the module and it will be automatically attached to your project's runtime and can be use throughout your project's scripts without the need to be re-import again.

  • With module resolver or bundler.

    import "@carlsebastian/dom-create-element/";

    • or specific import.

    import from "@carlsebastian/dom-create-element/-html";

  • Without module resolver or bundler.

    // #: Ensure to replace {your_root_folder}
    import "{your_root_folder}/node_modules/dom-create-element/index.js";

    • or specific import.

    // #: Ensure to replace {your_root_folder}
    import from "{your_root_folder}/node_modules/dom-create-element/src/create-element/-html.js";

Features

• createElement(tag, conf) - For generating a HTMLElement instance.
• createSVGElement(tag, conf) - For generating a SVGElement instance.
• createMathElement(tag, conf) - For generating a MathMLElement instance.

Example Usage

• Generating a link for facebook with css-style and href

import "@carlsebastian/dom-create-element/-html";

const ANCHOR = createElement("a", {
  class: ["link", "fb"],
  id: "fb-anchor",
  href: "https://www.facebook.com/",
  disabled: false,
  "aria-*": {
    label: "Redirect URL: www.facebook.com",
  },
  style: {
    all: "unset",
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    background: "#4265a7",
    color: "#fff",
    padding: "10px 15px",
    borderRadius: "5px",
    cursor: "pointer",
    letterSpacing: "2px",
    boxShadow: "0px 5px 3px 0px #000",
  },
  textContent: "FACEBOOK",
});

document.body.appendChild(ANCHOR);

• Preview

  • Example Usage Preview Result

Repository

• GitHub - DOM-Create-Element

Report an issue?

• GitHub - DOM-Create-Element - Issues

License

• Apache License 2.0