{"id":20196835,"url":"https://github.com/itsjonq/kreate","last_synced_at":"2025-07-29T16:12:06.008Z","repository":{"id":16657465,"uuid":"19412972","full_name":"ItsJonQ/kreate","owner":"ItsJonQ","description":"A tiny element creator plugin for jQuery.","archived":false,"fork":false,"pushed_at":"2017-04-17T15:51:32.000Z","size":371,"stargazers_count":81,"open_issues_count":0,"forks_count":9,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-07T19:48:29.680Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://itsjonq.github.io/kreate/","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/ItsJonQ.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}},"created_at":"2014-05-03T21:58:27.000Z","updated_at":"2022-07-28T12:15:25.000Z","dependencies_parsed_at":"2022-09-12T10:12:10.457Z","dependency_job_id":null,"html_url":"https://github.com/ItsJonQ/kreate","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fkreate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fkreate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fkreate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fkreate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItsJonQ","download_url":"https://codeload.github.com/ItsJonQ/kreate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248200497,"owners_count":21063908,"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-11-14T04:26:14.539Z","updated_at":"2025-04-10T10:43:58.825Z","avatar_url":"https://github.com/ItsJonQ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kreate.js #\nA tiny element creator plugin for jQuery.\n\n\u003cimg src=\"https://raw.githubusercontent.com/ItsJonQ/kreate/master/images/kreate-logo.png\"\u003e\n\nKreate is a tiny helper method for jQuery that can quickly generate DOM elements as a standard jQuery object. You can use Kreate to create a single DOM element (such as a div) or up to however many elements your browser can handle before crashing*.\n\n\\* I was able to generate 10 million elements. I tried 1 billion once, but Chrome crashed :(\n\n## Why Use Kreate?\nIn most cases, Kreate can create a single or multiple elements faster than jQuery - sometimes, significantly faster. Check out these [performance tests](http://jsperf.com/kreate-js-vs-jquery) setup on JSPerf.\n\nKreate can also be quicker and cleaner to write if you're planning on generating a series of elements.\n\n##### Kreate Example #####\n```\n$.kreate({\n    tag: 'li',\n    class: 'list-item',\n    length: 5\n});\n```\n\n##### jQuery Example #####\n```\n$('\u003cli class=\"list-item\"\u003e\u003c/li\u003e\u003cli class=\"list-item\"\u003e\u003c/li\u003e\u003cli class=\"list-item\"\u003e\u003c/li\u003e\u003cli class=\"list-item\"\u003e\u003c/li\u003e\u003cli class=\"list-item\"\u003e\u003c/li\u003e');\n```\n\n## Requirements\n- [jQuery](http://jquery.com/)\n- A can-do attitude!\n\n## How To Use\n#### Downloading from Github ####\nYou can download (as zip) or clone Kreate from Github.\n\n#### Installing from Bower #####\nTo install it using [Bower](http://bower.io/) with this command, ideally from within your project's directory:\n```\nbower install kreate\n```\n\nOnce you've got the files either from Github or Bower, load up Kreate **after** you add jQuery to your project\n\n##### Example #####\n```\n\u003cscript type=\"text/javascript\" src=\"jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"kreate.js\"\u003e\u003c/script\u003e\n```\n\n## Learning How to \"Kreate\"\nYou can kreate elements using two kreation methods: \"express\" and \"advanced\".\n\n##### Express\n```\n$.kreate('div.classname');\n```\n\n##### Advance\n```\n$.kreate({\n    tag: 'div',\n    class: 'classname'\n});\n```\n\nLearn more about these methods by checking out [Kreating 101](http://itsjonq.github.io/kreate/#kreating-101).\n\n\n## Options\nKreate was intentionally kept relatively minimal to ensure that executes quickly. Nevertheless, there are a handful of options that can customize and fancify your elements.\n\n- [tag](#tag)\n- [class](#class)\n- [id](#id)\n- [attr](#attr)\n- [content](#content)\n- [length](#length)\n- [uniqueId](#uniqueId)\n- [startId](#startId)\n- [output](#output)\n\n```\n$.kreate({\n    tag: 'div',\n    class: 'classname',\n    length: 15,\n    id: 'post',\n    attr: {\n        'data-lazy': true\n    }\n});\n```\nThe above example should generate a jQuery object with 15 div elements. Each of theme with the class of \"classname\" and an attribute of \"data-lazy\"=\"true\". They should also have id's of post-1, post-2.. post-15. Neat right? More on that below!\n\n#### tag\nOption: `tag`  Default: `div`  Type: `string`\n```\n$.kreate({ tag: 'div' });\n```\nThis defines what type of element you wish to Kreate. By default, Kreate will render div elements if nothing is defined.\n\nThis will render the follow HTML element\n```\n\u003cdiv\u003e\u003c/div\u003e\n```\n\n\n#### class\nOption: `class`  Type: `string`\n```\n$.kreate({ class: 'classname' });\n```\nThis defines the class/classes you wish to tack onto your element(s). You can add as many classes as you wish - just separate them with a space.\n```\n$.kreate({ class: 'class-one class-two class-three class-four' });\n```\n\nThis will render the follow HTML element\n```\n\u003cdiv class=\"class-one class-two class-three class-four\"\u003e\u003c/div\u003e\n```\n\n\n#### id\nOption: `id`  Type: `string`\n```\n$.kreate({ id: 'post' });\n```\nThis defines the id of the element(s) you're generating.\n\n##### Incrementing IDs\nIf you're generating multiple elements with IDs, Kreate will add a hyphenated number at the end to (try to) ensure that the IDs are unique.\n\nFor example, the snippet below will render 3 spans with defined IDs\n```\n$.kreate({ tag: 'span', id: 'label' });\n```\n\nThis will render the follow HTML elements\n```\n\u003cspan id=\"label-1\"\u003e\u003c/span\u003e\u003cspan id=\"label-2\"\u003e\u003c/span\u003e\u003cspan id=\"label-3\"\u003e\u003c/span\u003e\n```\n\n\n#### attr\nOption: `attr`  Type: `object`\n```\n$.kreate({\n    attr: {\n        'data-lazy': 'lazy-load'\n    }\n});\n```\nThis defines attributes for your element/elements (that aren't classes or id). This particular option is defined by an object, which allows you to set multiple attributes at once (if you wish).\n\nFor example, the snippet below will render an image with a defined src as well as a data lazy-load attribute.\n```\n$.kreate({\n    tag: 'img',\n    attr: {\n        src: 'my-awesome-image.jpg',\n        'data-lazy': 'lazy-load',\n        'data-load-type': 'fade-in'\n        'data-lazy-load-speed': 'fast'\n    }\n});\n```\nThis will render the follow HTML element\n```\n\u003cimg src=\"my-awesome-image.jpg\" data-lazy=\"lazy-load\" data-load-type=\"fade-in\" data-lazy-load-speed=\"fast\"\u003e\n```\n\n\n#### content\nOption: `content`  Type: `string`\n```\n$.kreate({ content: 'Stuff!' });\n```\nThis injects content into your element. The content can be plain text or HTML.\n\nFor example, the snippet below will inject a span with some text inside of a Kreated div:\n```\n$.kreate({ tag: 'div', content: '\u003cspan\u003eStuff!\u003c/span\u003e' });\n```\n\nThis will render the follow HTML elements\n```\n\u003cdiv\u003e\u003cspan\u003eStuff!\u003c/span\u003e\u003c/div\u003e\n```\n\n\n#### length\nOption: `length`  Default: `1`  Type: `number`\n```\n$.kreate({ length: 2 });\n```\nThis determines how many elements Kreate will generate. By default, Kreate will only make 1 element. You can make as many as your browser can handle. Although, I don't recommend going over 15 million (which does work!).\n\nFor example, the snippet below will render 3 list items\n```\n$.kreate({ tag: 'li', length: 3 });\n```\n\nThis will render the follow HTML elements\n```\n\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\n```\n\n\n#### uniqueId\nOption: `uniqueId`  Default: `true`  Type: `boolean`\n```\n$.kreate({ uniqueId: true });\n```\nThis determines whether or not Kreate will add numerated IDs to your elements if you generate multiple elements. **It is super highly recommended you leave this as true**. But, for whatever reason, if you're okay with having multiple IDs, you can flip it off by setting it as `false`.\n\n\n#### startId\nOption: `startId`  Default: `1`  Type: `number`\n```\n$.kreate({ startId: 1 });\n```\nThis is used when you're Kreating multiple elements **and** you've decided to add IDs to them using the `id` option. By default, the numeration should start at `-1`. However, you can start it at any number you wish by adjusting the `startId`.\n\nFor example, the snippet below will render 3 list items, starting from the ID of 5.\n```\n$.kreate({ tag: 'li', length: 3, id: 'task', startId: 5 });\n```\n\nThis will render the follow HTML elements\n```\n\u003cli id=\"task-5\"\u003e\u003c/li\u003e\u003cli id=\"task-6\"\u003e\u003c/li\u003e\u003cli id=\"task-7\"\u003e\u003c/li\u003e\n```\n\n#### output\nOption: `output`  Settings: `jquery` || `html` || `array`  Default: `jquery`  Type: `string`\n```\n$.kreate({ output: 'jquery' });\n```\nThis determines the output of Kreate. By default, it should Kreate a jQuery object with your generated elements. However, you can instead output Kreate as an HTML string by using `output: \"html\"`.\n\nFor example, the snippet below will render 3 list items as HTML\n```\nvar a = $.kreate({ tag: 'li', length: 3, output: 'html' });\n```\n\nThe variable \"a\" should equal\n```\n\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\n```\n\nYou can also output Kreate as an array by using `output: \"array\"`.\n\n\n## Have Fun!\nThat's it! There isn't really much to it. Any and all feedback is welcome! Good luck and have fun **Kreating** :).\n\n## \"Kreator\"\n(So cheesy I know.. But cheese is delicious.)\n\n#### Jon Q\n- [http://www.jonquach.com](http://www.jonquach.com)\n- [http://www.twitter.com/itsjonq](http://www.twitter.com/itsjonq)\n- [https://github.com/ItsJonQ/kreate/](https://github.com/ItsJonQ/kreate/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fkreate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsjonq%2Fkreate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fkreate/lists"}