| domgen – Creating HTML with Javascript without DOM APIPosted on September 2, 2010 by Jussi ToivolaFiled Under browser, javascript, jquery, open source, technology, web development Tired of using Javascript DOM API for generating HTML dynamically? Meet domgen. domgen is a tool for easy dynamic content generation via Javascript. It generates DOM elements from dictionary specification similar to HTML and eliminates the need for cumbersome DOM Javascript API. domgen uses a simple specification to generate the HTML. In some cases it’s more reliable to use DOM API to generate HTML instead of using innerHTML. We have had problems especially with iPhone when using innerHTML. So if you want to add dynamic HTML properly, you should use the Javascript DOM API. Consider the following short HTML where the contents inside body had to be generated: <body>
<div id="mydiv">my div</div>
</body>
Using Javascript DOM API: // Get the body tag
var body = document.getElementsByTagName("body")[0];
// Create 'div' element
var mydiv = document.createElement("div");
mydiv.setAttribute("id", "mydiv");
mydiv.innerText = "my div";
// Attach the div to body
body.appendChild(mydiv);
And using domgen: var spec = [
'div',
{
id : 'mydiv',
_innerText : 'my div'
}
];
domgen.generate( domgen.get("body")[0], spec);
// or with jQuery
domgen.generate( $("body")[0], spec);
To me, domgen seems a lot easier to read and work with. Get code and more examples here: https://bitbucket.org/mfabrik/domgen Creating a drag’n'drop basket with jQueryUIPosted on January 5, 2010 by Mikko OhtamaaFiled Under jquery, jqueryui, technology I have created an example how to create a “basked” with jQuery and jQueryUI with the following features
This kind of user interface pattern is suitable for
The example in fact bears the name “travel planner” but it is not tied to travel anyhow. Note: this is just a screenshot - please see live example The example code uses
The example code is well-documented with links to the further documentation. |
