{"id":23236672,"url":"https://github.com/datkat21/html","last_synced_at":"2025-06-29T01:35:29.486Z","repository":{"id":195214944,"uuid":"692604865","full_name":"datkat21/html","owner":"datkat21","description":"My Html library for JavaScript","archived":false,"fork":false,"pushed_at":"2024-01-21T08:06:54.000Z","size":76,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-28T06:06:51.147Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datkat21.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-17T02:11:08.000Z","updated_at":"2023-10-09T05:32:16.000Z","dependencies_parsed_at":"2023-09-17T02:42:52.850Z","dependency_job_id":"c4aa9d58-d151-4cc1-9781-e3ff46713cee","html_url":"https://github.com/datkat21/html","commit_stats":null,"previous_names":["datkat21/html"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datkat21%2Fhtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datkat21%2Fhtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datkat21%2Fhtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datkat21%2Fhtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datkat21","download_url":"https://codeload.github.com/datkat21/html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230181348,"owners_count":18185929,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-19T04:11:58.750Z","updated_at":"2024-12-19T04:11:59.489Z","avatar_url":"https://github.com/datkat21.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Html library for JavaScript\n\nThe Html library allows you to efficiently create HTML elements within any client-side JavaScript application.\n\n## Why?\n\nIt makes creating HTML elements much easier and less confusing.   \nConsider the following JavaScript using native DOM:\n```js\nconst paragraph = document.createElement(\"p\");\nparagraph.classList.add(\"my-paragraph\");\nparagraph.innerText = \"Hello, world\";\ndocument.body.appendChild(paragraph);\n```\nThis can be simplified to the following:\n```js\nconst paragraph =\n  // Create the specific element \n  new Html(\"p\")\n  // Apply the class\n  .class(\"my-paragraph\")\n  // Set the text\n  .text(\"Hello, world!\")\n  // This is an automatic querySelector (also works if you pass in `document.body`)\n  .appendTo(\"body\");\n```\n\nI made this library a few months ago and have used it in several projects, so I thought it was about time to give it its own repository to easily re-use when needed.\n\n\n## Usage\n\nInstall the module:\n\n```\nnpm i @datkat21/html\n```\n\nImport it into your project via method(s):\n\n1. Copy and import html.js as a module:\n  ```js\n  import Html from './html.js';\n  ```\n2. Loading via package manager:\n  ```js\n  import Html from '@datkat21/html';\n  ```\n\nIf you copy `html.js` into your website code and are using a code editor that supports TypeScript annotations, please also copy the html.d.ts file to smoothen your development experience with the library.\nIf you are creating with TypeScript (e.g. Deno or Bun), you may simply bring `html.ts` into your project if you don't want to import it from the NPM repository.\n\n\n## New in v1.2.0\n\nIt's mid 2024 now, time for a new minor update!\n\nThanks to the #4 pull request by SpcFORK, a few things have been tweaked to make the library run better and build quicker. There is also a new method: `getElement()`.\n\n`getElement()` acts similarly to `qs()` but returns a HTMLElement instead of a Html instance. This could be easier in some instances such as this:\n\n```js\n// Old method to retrieve sub-child HTML element (a bit more verbose)\nconst div = new Html('div').append(new Html('p').text(\"Hello!\"));\nconst innerParagraph = div.qs(\"p\").elm.textContent; // Hello!\n\n// New method (simpler)\nconst div = new Html('div').append(new Html('p').text(\"Hello!\"));\nconst innerParagraph = div.getElement(\"p\").textContent; // Hello!\n```\n\n## New in v1.1.6\n\nAlongside `.append()`, `.appendTo()`, and `.appendMany()`, Html now has `.prepend()`, `.prependTo()`, and `.prependMany()`! They function the same, but start from the beginning of the element instead of the end.\n\n## New in v1.1.3\n\n- **REMOVED** `.queryHtml()` from local class methods in favor of `.qs()` and `.qsa()`\n- Added `.qs()`, `.qsa()`, and `.id()` to local class methods\n\n## New in v1.1.0\n\n- A few new methods have been introduced.\n- Added full JSDoc documentation.\n- You can now (finally) create Html instances from actual HTML elements.\n\n### New static methods\n\nThese are very useful if you want to quickly retrieve a HTML element from the DOM as a new Html instance.\n\n- `Html.from(element)` Retrieve a HTML element as a new Html instance\n- `Html.qs(query)` Retrieve a querySelector as a new Html instance\n- `Html.qsa(query)` Retrieve all querySelector elements as an array of new Html instances\n\nExamples:\n\n```js\nHtml.from(document.body) // Html { elm: \u003cbody\u003e }\nHtml.qs('p.red') // Html { elm: \u003cp class=\"red\"\u003e }\nHtml.qsa('li') // Array(3) [ { elm: \u003cli\u003e }, {...}, {...} ]\n```\n\n### New methods\n\n- `queryHtml(selector)` querySelector something and return as a new Html instance\n- `styleJs({ ... })` Style as JS syntax (`backgroundColor` instead of `background-color` for example)\n- `getText()` Retrieve innerText\n- `getHtml()` Retrieve innerHTML\n- `getValue()` Retrieve value\n\nExamples:\n\n```js\nlet body = Html.qs('body');\n\n// queryHtml\nbody.queryHtml('p.red') // Html { elm: \u003cp class=\"red\"\u003e }\n\n// styleJs\nbody.styleJs({\n  backgroundColor: '#101010',\n  fontFamily: 'sans-serif',\n})\n\nlet div = new Html('div').appendTo('body');\n\n// getText\nlet p = new Html('p').text('Hello, world!').appendTo(div);\np.getText() // 'Hello, world!'\n\n// getHtml\ndiv.getHtml() // \u003cp\u003eHello, world!\u003c/p\u003e\n\n// getValue\nlet input = Html.qs('input');\nlet value = input.getValue();\n```\n\n## Documentation\n\nThe Html library is a class that can be initialized at any time to create HTML elements in a simple way.\n\n### Examples\n\nFor example, I'll show how some layouts can be created in HTML vs the Html class:\n\n```html\n\u003cdiv class=\"card\"\u003e\n  \u003cspan class=\"h1\"\u003eThis is a heading!\u003c/span\u003e\n  \u003cspan\u003eThis is my paragraph text\u003c/span\u003e\n\u003c/div\u003e\n```\n\nIn Html:\n\n```js\nnew Html(\"div\")\n  .class(\"card\")\n  .appendMany(\n    new Html(\"span\").class(\"h1\").text(\"This is a heading!\"),\n    new Html(\"span\").text(\"This is my paragraph text\")\n  );\n```\n\nYou also have to define where to place the element, using the `.appendTo()` method. Here's an example:\n\n```js\n// A new div that gets appended to the \u003cbody\u003e tag.\nconst container = new Html(\"div\").appendTo(\"body\");\n\n// A new span added with the class \"h1\" and text, then dynamically appended to the container.\nnew Html(\"span\")\n  .class(\"h1\")\n  .text(\"Hello, this goes into the container!\")\n  .appendTo(container);\n```\n\nThis will create the following layout:\n\n```html\n\u003cbody\u003e\n  \u003cdiv\u003e\n    \u003cspan class=\"h1\"\u003e Hello, this goes into the container! \u003c/span\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n```\n\n### Methods\n\nThere are a few more advanced methods to how the Html class works:\n\n- `.style()`  \n   Add inline styles\n  ```js\n  new Html(\"span\").style({\n    color: \"red\",\n    // These are CSS style names,\n    // so you will have to use dashes..\n    \"font-size\": \"18px\",\n    // Another example\n    \"backdrop-filter\": \"blur(4px)\"\n  });\n  ```\n- `.styleJs()`  \n   Add inline styles (JS syntax)\n  ```js\n  new Html(\"span\").styleJs({\n    color: \"red\",\n    fontSize: \"18px\",\n    backdropFilter: \"blur(4px)\"\n  });\n  ```\n- `.attr()`  \n   Set attributes for the element\n  ```js\n  new Html(\"span\").attr({\n    id: \"MySpan\",\n  });\n  // \u003cspan id=\"MySpan\"\u003e\u003c/span\u003e\n  ```\n- `.class()`  \n   Toggle a class (on/off)\n  ```js\n  new Html(\"span\").class(\"my-class\");\n  // \u003cspan class=\"my-class\"\u003e\u003c/span\u003e\n  ```\n- `.classOn()`  \n   Add a class (Recommended to use over `.class()`)\n  ```js\n  new Html(\"span\").classOn(\"my-class\");\n  // \u003cspan class=\"my-class\"\u003e\u003c/span\u003e\n  ```\n- `.classOff()`  \n   Remove a class\n  ```js\n  new Html(\"span\").classOff(\"my-class\");\n  // \u003cspan\u003e\u003c/span\u003e\n  ```\n- `.id()`  \n   Set the id of an element\n   ```js\n  new Html(\"div\").id(\"my-id\");\n  // \u003cdiv id=\"my-id\"\u003e\u003c/div\u003e\n   ```\n- `.on(eventName, eventHandler)`  \n   Add an event listener\n\n  ```js\n  function myEvent(e) {\n    console.log(e);\n  }\n\n  new Html(\"span\").on(\"click\", myEvent);\n\n  // or\n\n  new Html(\"span\").on(\"click\", function (e) {\n    console.log(e);\n  });\n  ```\n- `.un(eventName, eventHandler)`  \n- `.prepend(elm)`\n  Add a new element to the beginning of the element\n  ```js\n  const container = new Html(\"div\").prepend(\n    new Html(\"span\").text(\"Hello, world!\")\n  );\n  ```\n- `.prependMany(...elms)`\n  Add multiple elements to the start\n  ```js\n  new Html(\"div\").prependMany(\n    new Html(\"span\").class(\"h1\").text(\"Hello!\"),\n    new Html(\"span\").text(\"Hi!\")\n  );\n  /*\n  \u003cdiv\u003e\n    \u003cspan class=\"h1\"\u003eHello!\u003c/span\u003e\n    \u003cspan\u003eHi!\u003c/span\u003e\n  \u003c/div\u003e\n  */\n  ```\n- `.prependTo()`\n  Prepend the element to the beginning of another element\n  ```js\n  new Html(\"div\").prependTo(\"body\");\n  \n  /*\n  \u003cbody\u003e\n    \u003cdiv\u003e\u003c/div\u003e\n    \u003cp\u003eHello\u003c/p\u003e\n  \u003c/body\u003e\n  */\n  ```\n   Remove an event listener (if a function is available)\n\n  ```js\n  function myEvent(e) {\n    console.log(e);\n  }\n\n  new Html(\"span\").un(\"click\", myEvent);\n  ```\n- `.append(elm)`\n  Add a new element inside the element\n  ```js\n  const container = new Html(\"div\").append(\n    new Html(\"span\").text(\"Hello, world!\")\n  );\n  ```\n- `.appendMany(...elms)`\n  Add multiple elements\n  ```js\n  new Html(\"div\").appendMany(\n    new Html(\"span\").class(\"h1\").text(\"Hello!\"),\n    new Html(\"span\").text(\"Hi!\")\n  );\n  /*\n  \u003cdiv\u003e\n    \u003cspan class=\"h1\"\u003eHello!\u003c/span\u003e\n    \u003cspan\u003eHi!\u003c/span\u003e\n  \u003c/div\u003e\n  */\n  ```\n- `.appendTo()`\n  Append the element to another element\n  ```js\n  new Html(\"div\").appendTo(\"body\");\n  \n  /*\n  \u003cbody\u003e\n    \u003cp\u003eHello\u003c/p\u003e\n    \u003cdiv\u003e\u003c/div\u003e\n  \u003c/body\u003e\n  */\n  ```\n- `.cleanup()`  \n  Destroy the element\n\n  ```js\n  const div = new Html(\"div\").appendTo(\"body\");\n\n  // later\n  div.cleanup();\n  ```\n- `.swapRef(elm)`  \n  Swap the element reference with a new one\n\n  ```js\n  const div = new Html(\"div\").appendTo(\"body\");\n\n  const div2 = document.querySelector(\"body \u003e div.two\");\n\n  div.swapRef(div2); // div now references div2\n  ```\n- `.getText()`\n  Get text of the element\n\n  ```js\n  const div = new Html(\"div\").text(\"This is my text...\");\n\n  div.getText(); // 'This is my text...'\n  ```\n- `.getHtml()`\n  Get HTML content of the element\n\n  ```js\n  const div = new Html(\"div\").html(\"\u003cp\u003eThis is my \u003cb\u003eHTML\u003c/b\u003e content...\u003c/p\u003e\");\n\n  div.getHtml(); // '\u003cp\u003eThis is my \u003cb\u003eHTML\u003c/b\u003e content...\u003c/p\u003e'\n  ```\n- `.getValue()`\n  Get input value of the element\n\n  ```js\n  const input = new Html(\"input\").attr({ type: 'text' });\n\n  // after typing...\n\n  input.getValue(); // 'I typed this text'\n  ```\n\n## Building\n\nClone the repository:\n\n```\ngit clone https://github.com/datkat21/html.git\ncd html\n```\n\nInstall dependencies and run build script:\n\n```\nnpm i\nnpm run build # Build script.\n```\n\n## Repository\n\nYou can find the repository [on GitHub.](https://github.com/datkat21/html)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatkat21%2Fhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatkat21%2Fhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatkat21%2Fhtml/lists"}