{"id":28559244,"url":"https://github.com/toastdriven/domicile","last_synced_at":"2025-06-10T08:36:33.972Z","repository":{"id":20330573,"uuid":"23604996","full_name":"toastdriven/domicile","owner":"toastdriven","description":"Programmatic creation of DOM elements. Vaguely similar to React's DOM bits.","archived":false,"fork":false,"pushed_at":"2014-09-04T04:27:25.000Z","size":148,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-07T16:54:56.584Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/toastdriven.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-09-03T03:21:06.000Z","updated_at":"2024-12-07T13:26:21.000Z","dependencies_parsed_at":"2022-08-29T11:00:29.164Z","dependency_job_id":null,"html_url":"https://github.com/toastdriven/domicile","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toastdriven%2Fdomicile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toastdriven%2Fdomicile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toastdriven%2Fdomicile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toastdriven%2Fdomicile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toastdriven","download_url":"https://codeload.github.com/toastdriven/domicile/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toastdriven%2Fdomicile/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259039724,"owners_count":22796904,"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":"2025-06-10T08:36:19.791Z","updated_at":"2025-06-10T08:36:33.954Z","avatar_url":"https://github.com/toastdriven.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"domicile\n========\n\nProgrammatic creation of DOM elements.\n\nVaguely similar to React's DOM bits.\n\n\nExample:\n--------\n\n```javascript\nvar D = require('domicile').D\n\nvar todo = [\n    {id: 3, done: false, task: \"Buy milk\"},\n    {id: 6, done: false, task: \"Pick up glasses\"},\n    {id: 4, done: true, task: \"Write code\"}\n]\nvar item,\n    current\n\nvar list = D.ol({class: 'todo_list'})\n\nfor(var i = 0, len = todo.length; i \u003c len; i++) {\n    current = todo[i]\n    item = D.li({id: 'item-' + current.id, class: 'incomplete'}, current.task)\n\n    if(todo[i].done) {\n        item.attr('class', 'complete')\n    }\n\n    list.append(item)\n}\n\n// Rendering time!\nlist.render_html() // -\u003e Gives an HTML string suitable for ``.innerHTML``\n// ...or...\nlist.render_dom() // -\u003e Gives a DOM elements suitable for ``.appendChild``\n```\n\n\nLicense\n-------\n\n**BSD**\n\n\nAPI\n---\n\n### ``domicile.D``\n\nA pre-built instance of ``domicile.Dom``. A convenient shortcut.\n\nLike all instances of ``domicile.Dom``, this has a method per-HTML-tag\navailable (85 tags currently) on it, for easy creation of tags.\n\n**Example:**\n\n```javascript\nvar D = require('domicile').D\n\n// Create a simple div.\nvar div_1 = D.div(null, \"Hello, world!\")\n\n// Now with some attributes.\nvar div_2 = D.div({class: 'greeting', 'id': 'welcome_msg'}, \"Hello!\")\n```\n\n\n### ``domicile.Dom([tag_list], [delay_setup=false])``\n\nHandles automatically setting up a variety of methods, one per-HTML-tag.\n\n(Optionally) Accepts ``tag_list``, an array of strings of tag names. By\ndefault, if nothing is provided, the default list of all HTML5 tags is used.\n\n(Optionally) Accepts ``delay_setup``, a boolean. By default, this is considered\n``false``, meaning setup is run immediately when creating a new instance.\nDelaying setup is useful if you either want to conserve memory or avoid\nautomatically setting up all the various instance methods.\n\n**Example:**\n\n```javascript\nvar Dom = require('domicile').Dom\n\n// Default params, all tags present as methods.\n// Note: You must use ``new`` here to instantiate the class.\nvar dom_1 = new Dom()\nvar ul = dom_1.ul()\nvar li = dom_1.li({class: 'complete'}, \"Done, son.\")\n\n// You can check what tags are available.\nconsole.log(dom_1.AVAILABLE_TAGS)\n// Returns: ['div', 'span', ...]\n\n// Overridden tags.\nvar dom_2 = new Dom(['p', 'a'])\n// Only ``dom_2.p`` \u0026 ``dom_2.a`` are available as methods.\n```\n\n\n### ``domicile.Element(tag_name, [attributes], [children_or_content])``\n\nThe main class of Domicile, this handles creating HTML elements. The same\nclass handles all different forms of tags.\n\nRequires a ``tag_name`` argument, which should be a string of the tag name.\nEx. ``'div'``, ``'ul'``, ``'a'``, etc.\n\n(Optionally) Accepts an ``attributes`` argument, which should be either\n``null`` (no custom attributes) or an ``object`` with keys as the attribute\nnames \u0026 values as the attribute values.\n\n(Optionally) Accepts a ``children_or_content`` argument. If provided, two\nthings are accepted. If a plain string is provided, that string will become\nthe text in the element. Alternatively, you can provide 1-N ``Element`` objects,\nwhich become the child elements.\n\n**Example:**\n\n```javascript\nvar Element = require('domicile').Element\n\n// The simplest form, an empty div: ``\u003cdiv\u003e\u003c/div\u003e``\nvar just_a_div = new Element('div')\n\n// A plain paragraph: ``\u003cp\u003eHello!\u003c/p\u003e``\nvar plain_para = new Element('p', null, 'Hello!')\n\n// A complex form element: ``\u003cinput type=\"text\" name=\"username\" class=\"big login\"\u003e``\nvar username = new Element('input', {type: 'text', name: 'username', class: 'big login'})\n\n// A ordered list with several elements: \u003col rel=\"todo\"\u003e\u003cli data-complete=\"true\"\u003eBuy milk\u003c/li\u003e\u003cli data-complete=\"false\"\u003eWrite docs\u003c/li\u003e\u003c/ol\u003e\nvar todo = new Element('ol', {rel: 'todo'}\n  , new Element('li', {'data-complete': 'true'}, 'Buy milk')\n  , new Element('li', {'data-complete': 'false'}, 'Write docs')\n)\n```\n\n#### ``Element`` Methods\n\n##### ``Element.append(el)``\n\nAppends an ``Element`` to the end of the children on an element.\n\n**Example:**\n\n```javascript\nvar Element = require('domicile').Element\nvar div = new Element('div')\n\nvar welcome = new Element('span', {class: 'welcome'}, 'Welcome, ' + username + '!')\ndiv.append(welcome)\n```\n\n##### ``Element.insert(el, offset)``\n\nInserts an ``Element`` at a given position within the children on an element.\n\n**Example:**\n\n```javascript\nvar Element = require('domicile').Element\nvar ul = new Element('ul', null\n  , new Element('li', null, 'First')\n  , new Element('li', null, 'Third')\n)\n\nvar second = new Element('li', null, 'Second')\nul.insert(second, 1)\n```\n\n##### ``Element.remove(offset)``\n\nRemoves a specific child ``Element`` on an element.\n\n**Example:**\n\n```javascript\nvar Element = require('domicile').Element\nvar ul = new Element('ul', null\n  , new Element('li', null, 'First')\n  , new Element('li', null, 'Third')\n)\n\nul.remove(1)\n```\n\n##### ``Element.clear()``\n\nClears all children \u0026 content on an element.\n\n**Example:**\n\n```javascript\nvar Element = require('domicile').Element\nvar ul = new Element('ul', null\n  , new Element('li', null, 'First')\n  , new Element('li', null, 'Third')\n)\n\nul.clear()\n// Now equivalent to ``new Element('ul')``\n```\n\n##### ``Element.attr(key, value)``\n\nAdds/updates an attribute on an element.\n\n**Example:**\n\n```javascript\nvar Element = require('domicile').Element\nvar div = new Element('div')\n\ndiv.attr('id', 'test')\ndiv.attr('class', 'yup')\n\n// Manually set the content after the fact.\ndiv.content = 'Test message'\n```\n\n##### ``Element.render_dom()``\n\nRenders an element as a native DomElement(s).\n\n**Example:**\n\n```javascript\nvar Element = require('domicile').Element\nvar ul = new Element('ul', null\n  , new Element('li', null, 'First')\n  , new Element('li', null, 'Third')\n)\n\nvar el = ul.render_dom()\n\n// Now you can append elsewhere...\nvar parent = document.getElementById('something')\nparent.appendChild(el)\n```\n\n##### ``Element.render_html()``\n\nRenders an element as HTML text, suitable for ``.innerHTML``.\n\n**Example:**\n\n```javascript\nvar Element = require('domicile').Element\nvar ul = new Element('ul', null\n  , new Element('li', null, 'First')\n  , new Element('li', null, 'Third')\n)\n\nvar html = ul.render_html()\nconsole.log(html)\n// Returns: \"\u003cul\u003e\u003cli\u003eFirst\u003c/li\u003e\u003cli\u003eThird\u003c/li\u003e\u003c/ul\u003e\"\n\n// Now you can insert it elsewhere...\nvar parent = document.getElementById('something')\nparent.innerHTML = html\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoastdriven%2Fdomicile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoastdriven%2Fdomicile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoastdriven%2Fdomicile/lists"}