Это более читабельно и легко поддерживается, если код JavaScript напоминает структуру тега HTML, подобно тому, как ответил Лука.
Я сделал это немного по-другому и сделал функцию, чтобы сделать каждый элементредактируемый объект jQuery.
Например:
$$('div', {'id':'container'},
$$('div', {'id':'my_div'},
$$('h1',{'class':'my_header'},
$$('a',{'href':'/test/', 'class':'my_a_class'}, 'teststring'))));
Где функция $$ возвращает объект jQuery:
Это делает подход более гибким, и вы можете добавлять обработчики событий, данные и т. Д.к вложенным объектам jQuery, используя цепочку довольно легко.
Например:
$$('div', {'id':'container'},
$$('div', {'id':'my_div'},
$$('h1',{'class':'my_header'},
$$('a', { 'href': '/test/', 'class': 'my_a_class' }, 'teststring')
).click(function() { alert('clicking on the header'); })
).data('data for the div')
).hide();
Вы, вероятно, не хотите переусердствовать, но я все же нахожу код более читабельным, чем если бы он былиспользовать наилучший подход jQuery, используя отдельные вызовы .append (), .text (), .html () и т. д., или передавая jQuery $ сцепленную строку HTML.
Вотссылка на функцию $$ (вы можете назвать ее как-нибудь еще, если она вам не нравится, но я подумал, что $$ подходит, так как она возвращает объект jQuery и он также короткий):
function $$(tagName, attrTextOrElems) {
// Get the arguments coming after the params argument
var children = [];
for (var _i = 0; _i < (arguments.length - 2) ; _i++) {
children[_i] = arguments[_i + 2];
}
// Quick way of creating a javascript element without JQuery parsing a string and creating the element
var elem = document.createElement(tagName);
var $elem = $(elem);
// Add any text, nested jQuery elements or attributes
if (attrTextOrElems) {
if (typeof attrTextOrElems === "string") { // text
var text = document.createTextNode(attrTextOrElems);
elem.appendChild(text);
}
else if (attrTextOrElems instanceof jQuery) { // JQuery elem
$elem.append(attrTextOrElems);
}
else // Otherwise an object specifying attributes e.g. { 'class': 'someClass' }
{
for (var key in attrTextOrElems) {
var val = attrTextOrElems[key];
if (val) {
elem.setAttribute(key, val);
}
}
}
}
// Add any further child elements or text
if (children) {
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (typeof child === "string") { // text
var text = document.createTextNode(child);
elem.appendChild(text);
} else { // JQuery elem
$elem.append(child);
}
}
}
return $elem;
}