{"id":15383148,"url":"https://github.com/jhildenbiddle/create-elms","last_synced_at":"2025-04-15T19:32:13.790Z","repository":{"id":66334251,"uuid":"117193282","full_name":"jhildenbiddle/create-elms","owner":"jhildenbiddle","description":"A micro-library for efficiently creating HTML elements, settings attributes, adding to other elements, and returning an array of elements or HTML markup","archived":false,"fork":false,"pushed_at":"2024-02-07T01:26:37.000Z","size":673,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T00:11:15.585Z","etag":null,"topics":["append","browser","create","dom","element","html","insert","javascript","js","jsdom","markup","node","prepend"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/jhildenbiddle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"jhildenbiddle"}},"created_at":"2018-01-12T04:43:23.000Z","updated_at":"2024-12-30T14:51:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"bea0e812-17eb-4532-bed6-8de8ca58cfe1","html_url":"https://github.com/jhildenbiddle/create-elms","commit_stats":{"total_commits":64,"total_committers":2,"mean_commits":32.0,"dds":0.09375,"last_synced_commit":"6ef3265cd5647040aa5c9f6a1957e41af98da756"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fcreate-elms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fcreate-elms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fcreate-elms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fcreate-elms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhildenbiddle","download_url":"https://codeload.github.com/jhildenbiddle/create-elms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741202,"owners_count":21154253,"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":["append","browser","create","dom","element","html","insert","javascript","js","jsdom","markup","node","prepend"],"created_at":"2024-10-01T14:35:32.039Z","updated_at":"2025-04-15T19:32:13.771Z","avatar_url":"https://github.com/jhildenbiddle.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jhildenbiddle"],"categories":[],"sub_categories":[],"readme":"# create-elms \u003c!-- omit in toc --\u003e\n\n[![NPM](https://img.shields.io/npm/v/create-elms.svg?style=flat-square)](https://www.npmjs.com/package/create-elms)\n[![GitHub Workflow Status (master)](https://img.shields.io/github/actions/workflow/status/jhildenbiddle/create-elms/test.yml?branch=master\u0026label=checks\u0026style=flat-square)](https://github.com/jhildenbiddle/create-elms/actions?query=branch%3Amaster+)\n[![Codacy code quality](https://img.shields.io/codacy/grade/22ce05a1fe9b406e8426ea0ef61c30b9/master?style=flat-square)](https://app.codacy.com/gh/jhildenbiddle/create-elms/dashboard?branch=master)\n[![Codacy branch coverage](https://img.shields.io/codacy/coverage/22ce05a1fe9b406e8426ea0ef61c30b9/master?style=flat-square)](https://app.codacy.com/gh/jhildenbiddle/create-elms/dashboard?branch=master)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/jhildenbiddle/create-elms/blob/master/LICENSE)\n[![Sponsor this project](https://img.shields.io/static/v1?style=flat-square\u0026label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86)](https://github.com/sponsors/jhildenbiddle)\n\nCreate HTML elements, set attributes, add to other elements, and return an array of DOM nodes or HTML markup in a single function call.\n\n## Features\n\n- Quickly create HTML elements using markup or JavaScript objects\n- Set attributes on individual or groups of elements\n- Append, prepend, and insert elements before or after other elements\n- Return an array of elements or HTML markup\n- UMD and ES6 module available\n- Compatible with modern and legacy browsers (IE9+)\n- Compatible with Node environments using [jsdom](https://github.com/tmpvar/jsdom)\n- Lightweight (~1k min+gzip) and dependency-free\n\n## Installation\n\nNPM:\n\n```bash\nnpm install create-elms\n```\n\n```javascript\n// file.js\nimport createElms from 'create-elms';\nconst elms = createElms(/* ... */);\n```\n\nGit:\n\n```bash\ngit clone https://github.com/jhildenbiddle/create-elms.git\n```\n\nCDN ([jsdelivr.com](https://www.jsdelivr.com/) shown, also on [unpkg.com](https://unpkg.com/)):\n\n```html\n\u003c!-- ES5 (latest v1.x.x) --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/create-elms@1\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var elms = createElms(/* ... */);\n\u003c/script\u003e\n```\n\n```html\n\u003c!-- ES6 module (latest v1.x.x) --\u003e\n\u003cscript type=\"module\"\u003e\n  import getCssData from 'https://cdn.jsdelivr.net/npm/create-elms@1/dist/create-elms.esm.min.js';\n  const elms = createElms(/* ... */);\n\u003c/script\u003e\n```\n\n## Examples\n\nRender elements using strings and/or objects:\n\n```javascript\nlet elm, elms;\n\n// Create an element from a string\nelm = createElms('\u003cp\u003eFoo\u003c/p\u003e'); // =\u003e [elm]\n\n// ... or an object\nelm = createElms({\n  tag : 'p',\n  text: 'Foo'\n}); // =\u003e [elm]\n\n// ... or multiple elements from a string\nelms = createElms('\u003cp\u003eFoo\u003c/p\u003e\u003cp\u003eBar\u003c/p\u003e\u003cp\u003eBaz\u003c/p\u003e'); // =\u003e [elm, elm, elm]\n\n// ... or an array of strings\nelms = createElms([\n  '\u003cp\u003eFoo\u003c/p\u003e',\n  '\u003cp\u003eBar\u003c/p\u003e',\n  '\u003cp\u003eBaz\u003c/p\u003e'\n]); // =\u003e [elm, elm, elm]\n\n// ... or an array of objects\nelms = createElms([\n  { tag: 'p', text: 'Foo' },\n  { tag: 'p', text: 'Bar' },\n  { tag: 'p', text: 'Baz' }\n]); // =\u003e [elm, elm, elm]\n\n// ... or an array containing strings and objects\nelms = createElms([\n  '\u003cp\u003eFoo\u003c/p\u003e',\n  '\u003cp\u003eBar\u003c/p\u003e',\n  { tag: 'p', text: 'Baz' }\n]); // =\u003e [elm, elm, elm]\n```\n\nSet per-element attributes or shared attributes:\n\n```javascript\nlet elm, elms;\n\n// Set attributes on specific elements...\nelm = createElms({\n  tag : 'p',\n  text: 'Foo',\n  attr: { id: 'foo', class: 'myclass' }\n});\n\n// ... or use the 'sharedOptions' argument for multiple elementData objects\nelms = createElms(\n  // elementData\n  [\n    { text: 'Foo', attr: { id: 'foo' } },\n    { text: 'Bar', attr: { id: 'bar' } },\n    { text: 'Baz', attr: { id: 'baz' } }\n  ],\n  // sharedOptions\n  {\n    tag : 'p',\n    attr: { class: 'myclass' }\n  }\n);\n\n// ... or to apply options to one-or-more elementData strings\nelms = createElms(\n  // elementData\n  [\n    '\u003cp id=\"foo\"\u003eFoo\u003c/p\u003e',\n    '\u003cp id=\"bar\"\u003eBar\u003c/p\u003e',\n    '\u003cp id=\"baz\"\u003eBaz\u003c/p\u003e'\n  ],\n  // sharedOptions\n  {\n    class: 'myclass'\n  }\n);\n```\n\nAppend, prepend, or insert elements:\n\n```javascript\nlet elm, elms;\n\n// Use CSS selectors, HTMLElement(s) or Node(s)\nelm = createElms({ tag: 'p', appendTo: 'body' });\nelm = createElms({ tag: 'p', appendTo: document.body });\nelm = createElms({ tag: 'p', appendTo: document.querySelector('body') });\nelm = createElms({ tag: 'p', appendTo: document.querySelectorAll('div') });\n\n// ... or an array of CSS selectors, HTMLElements, and/or Nodes\nelm = createElms({\n  tag     : 'p',\n  appendTo: [\n    'body',\n    document.querySelectorAll('div')\n  ]\n});\n\n// Specify multiple append/prepend/insert points per element\nelms = createElms({\n  tag         : 'p',\n  appendTo    : 'body',\n  prependTo   : document.body,\n  insertBefore: document.querySelectorAll('div'),\n  insertAfter : document.getElementsByTagName('h1')\n});\n\n// ... or use the 'shadedOptions' argument for multiple elements\nelms = createElms(\n  // elementData\n  [\n    '\u003cp\u003eText1\u003c/p\u003e',\n    '\u003cp\u003eText2\u003c/p\u003e'\n  ],\n  // shadedOptions\n  {\n    appendTo    : 'body',\n    prependTo   : document.body,\n    insertBefore: document.querySelectorAll('div'),\n    insertAfter : document.getElementsByTagName('h1')\n  }\n);\n```\n\nHave elements returned as HTMLElements or HTML markup:\n\n```javascript\n// Return as HTML elements (default)\nlet elm = createElms({ tag: 'p' });\n// =\u003e [elm]\n\n// Return as HTML markup\nlet html = createElms({ tag: 'p' }, { returnHtml: true });\n// =\u003e '\u003cp\u003e\u003c/p\u003e'\n```\n\n## Usage\n\n```javascript\ncreateElements(elementData, sharedOptions = {}, documentObject = window.document)\n```\n\n- Returns: `Array`\n  - An array of of elements (default)\n  - An array of HTML markup (when [returnHtml](#sharedoptions) option is `true`).\n\n### elementData \u003c!-- omit in toc --\u003e\n\n- Type: `Object`, `String`, or `Array`\n  - `String` should be valid HTML markup\n  - `Object` should be an HTMLElement or Node\n  - `Array` should contain HTML markup, HTMLElements, and/or Nodes\n\n**Strings**\n\n- Strings may contain multiple elements\n- Each top-level element in a string will be returned in the return `Array`\n- Use sharedOptions to apply properties to `String` elementData\n- If sharedOptions are used, options will be applied to all top-level elements in the string\n\n**Objects**\n\n- The `html` value will be inserted as HTML content\n- The `text` value will be inserted as text content. This value is ignored if `html` is defined.\n- The `attr` value should contain attribute name/value pairs\n- The `appendTo`, `prependTo`, `insertBefore` and `insertAfter` properties accept a CSS selector, HTMLElement, HTMLCollection, Node, NodeList, or an `Array` of these `Object` types.\n\n| Property     | Type           | Description                             |\n| ------------ | -------------- | --------------------------------------- |\n| tag          | string         | Element HTML tag                        |\n| attr         | object         | Element attributes                      |\n| html         | string         | Content to append to element(s) as HTML |\n| text         | string         | Content to append to element(s) as text |\n| appendTo     | object\\|string | Node(s) to append element(s) to         |\n| prependTo    | object\\|string | Node(s) to prepend element(s) to        |\n| insertBefore | object\\|string | Node(s) to insert element(s) before     |\n| insertAfter  | object\\|string | Node(s) to insert element(s) after      |\n\n**Examples**\n\n```javascript\n// String\nlet elm1 = createElement('\u003cp id=\"foo\" class=\"myclass\"\u003e\u003ca href=\"/\"\u003eHome\u003c/a\u003e');\n// =\u003e [elm] (top-level \u003cp\u003e is returned, not nested \u003ca\u003e)\n\n// String with multiple elements\nlet elms1 = createElement('\u003cp\u003eText1\u003c/p\u003e\u003cp\u003eText2\u003c/p\u003e\u003cp\u003eText3\u003c/p\u003e');\n// =\u003e [elm, elm, elm] (all top-level elements returned)\n\n// Object\nlet elm2 = createElement({\n  tag : 'p',\n  html: '\u003ca href=\"/\"\u003eHome\u003c/a\u003e',\n  attr: { id: 'foo', class: 'myclass' }\n});\n// =\u003e [elm]\n\n// Array of strings and/or objects\nlet elms = createElement([\n  '\u003cp\u003eText\u003c/p\u003e',\n  { tag: 'p', text: 'Text' }\n]);\n// =\u003e [elm, elm]\n```\n\n### sharedOptions \u003c!-- omit in toc --\u003e\n\n- Type: `Object`\n- Default: `{}`\n\nOptions are applied to all [elementData](#elementData) with the following rules:\n\n- When applied to an elementData `Object`, all options are valid.\n- When applied to an elementData `String`, the `tag` property is ignored.\n- Existing tags, attributes, HTML and text content will not be replaced by shared options.\n\n**Object properties**\n\nAll properties from [elementData](#elementData) plus the following:\n\n| Property   | Type    | Default | Description                              |\n| ---------- | ------- | ------- | ---------------------------------------- |\n| returnHtml | Boolean | `false` | Return elements as array of HTML markup when `true`. |\n\n**Example**\n\n```javascript\n// Return as HTML markup\nlet html = createElms(\n  // elementData\n  { tag: 'p', text: 'Text' },\n  // sharedOptions\n  { returnHtml: true }\n);\n// =\u003e '\u003cp\u003eText\u003c/p\u003e'\n```\n\n### documentObject \u003c!-- omit in toc --\u003e\n\n- Type: `Object`\n- Default: `window.document`\n\nThis is the document object on which `document.createElement` and `document.querySelectorAll` methods will be called. The default value assumes a browser environment, but passing a reference to a document object created by tools like [jsdom](https://github.com/tmpvar/jsdom) allows creating HTML elements and markup in a Node environment (without polluting global variables).\n\n**Example**\n\n```javascript\nconst createElms = require('create-elms');\nconst jsdom      = require('jsdom');\nconst dom        = new JSDOM();\nconst jsDocument = dom.window.document;\n\nlet elm = createElms({ tag: 'p', {}, dom.window.document)\n// =\u003e [elm]\n\nlet html = createElms({ tag: 'p', { returnHtml: true }, dom.window.document)\n// =\u003e '\u003cp\u003e\u003c/p\u003e'\n```\n\n## Sponsorship\n\nA [sponsorship](https://github.com/sponsors/jhildenbiddle) is more than just a way to show appreciation for the open-source authors and projects we rely on; it can be the spark that ignites the next big idea, the inspiration to create something new, and the motivation to share so that others may benefit.\n\nIf you benefit from this project, please consider lending your support and encouraging future efforts by [becoming a sponsor](https://github.com/sponsors/jhildenbiddle).\n\nThank you! 🙏🏻\n\n## Contact \u0026 Support\n\n- Follow 👨🏻‍💻 **@jhildenbiddle** on [Twitter](https://twitter.com/jhildenbiddle) and [GitHub](https://github.com/jhildenbiddle) for announcements\n- Create a 💬 [GitHub issue](https://github.com/jhildenbiddle/create-elms/issues) for bug reports, feature requests, or questions\n- Add a ⭐️ [star on GitHub](https://github.com/jhildenbiddle/create-elms) and 🐦 [tweet](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fjhildenbiddle%2Fcreate-elms\u0026hashtags=css,developers,frontend,javascript) to promote the project\n- Become a 💖 [sponsor](https://github.com/sponsors/jhildenbiddle) to support the project and future efforts\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](https://github.com/jhildenbiddle/create-elms/blob/master/LICENSE) for details.\n\nCopyright (c) John Hildenbiddle ([@jhildenbiddle](https://twitter.com/jhildenbiddle))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhildenbiddle%2Fcreate-elms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhildenbiddle%2Fcreate-elms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhildenbiddle%2Fcreate-elms/lists"}