Its always a good idea to avoid creating DOM elements from a chunk of text for the same old principal, modularization.

jQuery offers a very neat way of creating DOM elements that can be extended with ease later on. Here is a demonstration.

$('<div class="my-class" id="my-id">Text here.</div>')
.css({
	width: "200px",
	height: "200px",
	"background-color": "red"
}).appendTo($('body'));

We Could easily take the above code and turn it into a more modular form like this:

$div = $('<div />', {
	id: 'my-id',
	"class": 'my-class',
	text: "Text here.",
	"css": {
		width: "200px",
		height: "200px",
		"background-color": "red"
	}});

$('body').append($div);

With this way, we can right away notice the structure of the element we are creating. Even though it might look like we are writing more code,the minute we start assigning custom values to our options you will see the clarity in reading and maintaining your code.

This is the signature above code follows:

$createdElement = $('element-type', {options});

Don’t forget, well structured code is always better than not structured code.