{"id":25195950,"url":"https://github.com/simplisticated/protein","last_synced_at":"2026-05-19T03:04:38.693Z","repository":{"id":62451204,"uuid":"78384141","full_name":"simplisticated/Protein","owner":"simplisticated","description":"JavaScript generator for HTML code.","archived":false,"fork":false,"pushed_at":"2017-02-08T15:45:33.000Z","size":341,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-31T21:15:21.575Z","etag":null,"topics":["html","html-structure","insert-tags","jquery","jquery-element"],"latest_commit_sha":null,"homepage":null,"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/simplisticated.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":"2017-01-09T01:51:32.000Z","updated_at":"2021-12-23T11:00:29.000Z","dependencies_parsed_at":"2022-11-01T23:33:10.420Z","dependency_job_id":null,"html_url":"https://github.com/simplisticated/Protein","commit_stats":null,"previous_names":["igormatyushkin014/protein"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplisticated%2FProtein","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplisticated%2FProtein/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplisticated%2FProtein/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplisticated%2FProtein/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simplisticated","download_url":"https://codeload.github.com/simplisticated/Protein/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208022,"owners_count":20901568,"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":["html","html-structure","insert-tags","jquery","jquery-element"],"created_at":"2025-02-10T01:39:11.878Z","updated_at":"2026-05-19T03:04:38.647Z","avatar_url":"https://github.com/simplisticated.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\" \u003e\n    \u003cimg src=\"https://github.com/igormatyushkin014/Protein/blob/master/images/logo-1024-300.png\" alt=\"Protein\" title=\"Protein\"\u003e\n\u003c/p\u003e\n\n# At a Glance\n\n`Protein` is an easy but super powerful JavaScript framework that allows you to generate HTML structure using JavaScript. With `Protein` you don't need to write HTML code inside of `body` tag at all. But you are still able to combine HTML and `Protein` partially when needed.\n\nThis framework is incredibly helpful when you need to generate some HTML in JavaScript. It's built on the top of [jQuery](http://jquery.com) and is a very flexible thing. Just try it and you'll never get back to traditional approach.\n\nWhy this framework was made? Because I can.\n\n# How To Get Started\n\nJust copy [lib/protein.js](./lib/protein.js) file to your project and don't forget to follow dependencies.\n\n# Dependencies\n\n* jQuery 3.1.1 or later.\n\n# Usage\n\n## Initialisation of Protein object\n\nEverything begins with `Protein` instance. All `Protein` objects are associated with `jQuery` elements.\n\n`Protein` instance associated with `html` element:\n```javascript\nProtein.html()\n```\n\n`Protein` instance associated with `head` element:\n```javascript\nProtein.head()\n```\n\n`Protein` instance associated with `body` element:\n```javascript\nProtein.body()\n```\n\n`Protein` instance associated with jQuery element:\n```javascript\nnew Protein($(\"body table\"))\n```\n\nBy default, empty constructor returns `Protein` instance associated with `body` element:\n```javascript\nnew Protein() // is equivalent to Protein.body()\n```\n\njQuery element associated with `Protein` instance can be obtained in this way:\n\n```javascript\n    var associatedElement = proteinInstance.getTopElement();\n```\n\n## Insert tags\n\nEach `Protein` object is a reference to some jQuery element. You can use `Protein` to change internal structure of the element, associated with your `Protein` instance.\n\nTo insert tag inside of the associated tag, use this:\n\n```javascript\nproteinInstance.tag(\"div\");\nproteinInstance.tag(\"span\");\nproteinInstance.tag(\"any-other-tag-name\");\n```\n\nAlso, you can use `Alphabet` class:\n```javascript\nproteinInstance.tag(Alphabet.div);\nproteinInstance.tag(Alphabet.span);\nproteinInstance.tag(Alphabet.ul);\nproteinInstance.tag(Alphabet.li);\n```\n\n`Alphabet` is a collection of all existing HTML tags. It's recommended to use tags from `Alphabet` instead of writing tag's name as a string.\n\nIf you need to configure inserted tag (add id, class, any other attributes), you can use special configuration block:\n\n```\nproteinInstance.tag(Alphabet.div, function (div) {\n    // div is a jQuery element\n    div.attr(\"class\", \"container\");\n});\n```\n\n`tag` method returns the same `Protein` instance, so it supports call chains:\n\n```\nproteinInstance.tag(Alphabet.div, function (div) {\n    div.attr(\"class\", \"container\");\n})\n.tag(Alphabet.img, function (img) {\n    img.attr(\"src\", \"http://cdn4.iconfinder.com/data/icons/scripting-and-programming-languages/512/js-512.png\"\n})\n.tag(Alphabet.table);\n```\n\nAll tags in the last example will be inserted on the same level of the tag associated with current `Protein` instance. So, if we use `Protein` object associated with body:\n\n```javascript\nProtein\n    .body\n        .tag(Alphabet.div, function (div) {\n            div.attr(\"class\", \"container\");\n        })\n        .tag(Alphabet.img, function (img) {\n            img.attr(\"src\", \"http://cdn4.iconfinder.com/data/icons/scripting-and-programming-languages/512/js-512.png\"\n        }\n        .tag(Alphabet.table);\n```\n\nresult HTML structure will look like this:\n\n```html\n\u003cbody\u003e\n    \u003cdiv class=\"container\"\u003e\n    \u003c/div\u003e\n    \u003cimg src=\"http://cdn4.iconfinder.com/data/icons/scripting-and-programming-languages/512/js-512.png\" /\u003e\n    \u003ctable\u003e\n    \u003c/table\u003e\n\u003c/body\u003e\n```\n\nThen you could ask: how to insert tag inside of `div.container`? The answer is here:\n\n```javascript\nProtein\n    .body\n        .tag(Alphabet.div, function (div) {\n            div.attr(\"class\", \"container\");\n        })\n            .open()\n                .tag(Alphabet.h2)\n            .close()\n        .tag(Alphabet.img, function (img) {\n            img.attr(\"src\", \"http://cdn4.iconfinder.com/data/icons/scripting-and-programming-languages/512/js-512.png\"\n        }\n        .tag(Alphabet.table);\n```\n\nBefore inserting sub-tag in the structure, you should open previously created tag. When you finished insertions, close that tag. More detailed example:\n\n```javascript\nProtein\n    .body\n        .tag(Alphabet.div, function (div) {\n            div.attr(\"class\", \"container\");\n        })\n            .open()\n                .tag(Alphabet.img, function (img) {\n                    img.attr(\"src\", \"http://cdn4.iconfinder.com/data/icons/scripting-and-programming-languages/512/js-512.png\"\n                }\n                .tag(Alphabet.h2)\n                    .open()\n                        .text(\"This is a title!\")\n                    .close()\n                .tag(Alphabet.p)\n                    .open()\n                        .text(\"And here is subtitle.\")\n                    .close()\n            .close()\n```\n\nHTML result:\n\n```html\n\u003cbody\u003e\n    \u003cdiv class=\"container\"\u003e\n        \u003cimg src=\"http://cdn4.iconfinder.com/data/icons/scripting-and-programming-languages/512/js-512.png\" /\u003e\n        \u003ch2\u003eThis is a title!\u003c/h2\u003e\n        \u003cp\u003eAnd here is subtitle.\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n```\n\nAs you can see, it's also possible to insert text using `text` method. If you need to insert some string with HTML code, use `html` method instead:\n\n```javascript\nProtein\n    .body\n        .tag(Alphabet.div, function (div) {\n            div.attr(\"class\", \"container\");\n        })\n            .open()\n                .html(\"\u003cp\u003e\u003c/p\u003e\")\n            .close();\n```\n\n## Remove tags\n\nRemoving inner (nested) elements is quite simple. Use `clear` method of `Protein` instance:\n\n```javascript\nProtein\n    .body\n        .clear();\n```\n\nThe code above removes all nested elements from `body` element.\n\n## Blocks\n\nSometimes you need to implement some complicated logic with tags (cycles, conditions, etc). In this case, `block` method can be helpful:\n\n```javascript\nnew Protein($(\"body table tbody\"))\n    .block(function (protein) {\n        for (var rowIndex = 0; rowIndex \u003c 3; rowIndex++) {\n            protein\n                .tag(Alphabet.tr)\n                    .open()\n                        .block(function (protein){\n                            for (var columnIndex = 0; columnIndex \u003c 3; columnIndex++) {\n                                protein\n                                    .tag(Alphabet.td)\n                                        .open()\n                                            .text((rowIndex + 1) * 10 + columnIndex + 1);\n                                        .close();\n                            }\n                        })\n                    .close();\n        }\n    });\n```\n\nHTML result:\n\n```html\n\u003cbody\u003e\n    \u003ctable\u003e\n        \u003ctbody\u003e\n            \u003ctr\u003e\n                \u003ctd\u003e11\u003c/td\u003e\n                \u003ctd\u003e12\u003c/td\u003e\n                \u003ctd\u003e13\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003e21\u003c/td\u003e\n                \u003ctd\u003e22\u003c/td\u003e\n                \u003ctd\u003e23\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003e31\u003c/td\u003e\n                \u003ctd\u003e32\u003c/td\u003e\n                \u003ctd\u003e33\u003c/td\u003e\n            \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n\u003c/body\u003e\n```\n\n`block` method returns current `Protein` instance, so it's possible to use call chains here too.\n\nWith `block` method you can also manipulate with HTML element linked with `Protein` instance:\n\n```javascript\nnew Protein($(\"body table tbody\"))\n    .block(function (protein) {\n        protein.getTopElement().hide(); // Hides table body\n    });\n```\n\nOr even manage higher level elements:\n\n```javascript\nnew Protein($(\"body\"))\n    .tag(Alphabet.table)\n        .open()\n            .tag(Alphabet.tbody)\n                .open()\n                    .block(function (protein){\n                        protein\n                            .getHigherLevelInstance()\n                            .getHigherLevelInstance()\n                            .hide(); // Hides page body\n                    })\n                .close()\n        .close();\n```\n\n# Integration with jQuery\n\n`Protein` uses `jQuery` under the hood. When you configure new tag, you use `jQuery` element so it's possible to make a lot of different manipulations with it:\n\n```javascript\nproteinInstance\n    .tag(Alphabet.div, function (div) {\n        div.addClass(\"container\").hide();\n        div.find(\"p\").remove();\n    });\n```\n\nor easier:\n\n```javascript\nproteinInstance\n    .tag(Alphabet.div)\n        .getTopElement()\n            .addClass(\"container\")\n            .hide()\n            .find(\"p\")\n            .remove();\n```\n\n# Demo\n\nIf you want to see how `Protein` works in real life, pull repository and open [demo/index.html](./demo/index.html) page.\n\n# License\n\n`Protein` is available under the MIT license. See the [LICENSE](./LICENSE) file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplisticated%2Fprotein","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplisticated%2Fprotein","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplisticated%2Fprotein/lists"}