Laconic: a New Way to Generate DOM Content from JavaScript

Content can be inserted into your page using innerHTML or outerHTML…


var container = document.getElementById("container");
container.innerHTML = "<p>Here's some new <strong>DOM</strong> content.</p>";

(Note that jQuery also uses innerHTML for DOM content manipulation).

It’s fast and easy — but it’s not without problems:

Invalid HTML strings can be inserted which make errors difficult to spot and debug.
You may encounter browser issues if you attempt complex activities such as using or modifying nodes in the resulting DOM content.
Although it’s well supported, innerHTML is a proprietary technology and not part of the W3C DOM. It offends the standards gods.

So let’s look at the DOM-based alternative:


var newpara = document.createElement("p");
var newstrong = document.createElement("strong");
newstrong.appendChild(document.createTextNode("DOM"));
newpara.appendChild(document.createTextNode("Here's some new "));
newpara.appendChild(newstrong);
newpara.appendChild(document.createTextNode(" content."));

var container = document.getElementById("container");
container.appendChild(newpara);

Nasty. It’s three times longer, slower to execute and still prone to human error.

Several years ago I devised by own solution, BetterInnerHTML, which loaded an HTML string as XML, recursed the structure and inserted appropriate nodes into the DOM. It worked, but I was never totally happy with performance or issues such as HTML entities.

Fortunately, Joe Stelmach has devised an alternative. It’s a small standalone utility named Laconic which uses a logical JavaScript notation to map directly to HTML, e.g.


$.el.p(
	"Here's some new ",
	$.el.strong("DOM"),
	" content."
).appendTo(document.getElementById("container"));

Attributes are supported using object literal notation:


// produce <div class="example"><div>Content</div></div>
$.el.div(
	{ "class": "example"},
	$.el.div("Content")
);

I like it. While innerHTML remains the best option for quick and dirty DOM content generation, Laconic will be useful in those odd situations when it fails to work as expected.

For more information and downloads, refer to:

Frequently Asked Questions (FAQs) about Laconic JavaScript DOM Content Generation

What is the difference between innerHTML and createElement in JavaScript?

The innerHTML property in JavaScript allows you to get or set the HTML content within an element. It’s a quick and easy way to manipulate the content of a webpage. However, it has some drawbacks. It can be slower and less secure than other methods, as it has to parse the entire HTML string.

On the other hand, the createElement method in JavaScript allows you to create a new element in the Document Object Model (DOM). This method is more secure and faster than innerHTML, as it doesn’t require parsing an HTML string. However, it can be more verbose and complex to use, especially for creating multiple elements or complex structures.

What are some modern alternatives to innerHTML and appendChild in JavaScript?

There are several modern alternatives to innerHTML and appendChild in JavaScript. One of them is the insertAdjacentHTML method. This method allows you to insert HTML at a specified position relative to an element. It’s faster and more flexible than innerHTML, as it doesn’t require re-parsing the entire element’s content.

Another alternative is the use of template literals, also known as template strings. These are string literals that allow embedded expressions. You can use them to create HTML strings in a more readable and concise way.

How can I use the createElement method in jQuery?

In jQuery, you can use the $ (dollar sign) function to create new elements. This function is equivalent to the createElement method in JavaScript. Here’s an example:

var newElement = $('<div></div>');

In this example, a new div element is created. You can then manipulate this element using jQuery’s methods, such as appendTo, before or after, to insert it into the DOM.

What are the advantages and disadvantages of using innerHTML vs createElement in JavaScript?

The main advantage of using innerHTML is its simplicity. It’s easy to use and understand, especially for beginners. However, it has some disadvantages. It can be slower than other methods, as it requires parsing an HTML string. It’s also less secure, as it can potentially open up your site to cross-site scripting (XSS) attacks.

On the other hand, createElement is more secure and faster than innerHTML. It doesn’t require parsing an HTML string, which makes it more efficient. However, it can be more verbose and complex to use, especially for creating multiple elements or complex structures.

How can I use the laconic JavaScript for DOM content generation?

Laconic JavaScript is a minimalist library for generating DOM content. It provides a simple and efficient way to create and manipulate DOM elements. Here’s an example of how to use it:

var newElement = $.el.div({class: 'myClass'}, 'Hello, world!');
document.body.appendChild(newElement);

In this example, a new div element with the class ‘myClass’ and the text ‘Hello, world!’ is created and appended to the body of the document.