JavaScript: создание DOM фрагментов

Если приходилось когда-нибудь писать JavaScript и приходилось в JavaScript’е писать что-то вроде:
var p = document.createElement( «p» );
p.appendChild( document.createTextNode( «Настоящий рыба фиш.» ) );
var div = document.createElement( «div» );
div.setAttribute( 'id', 'new' );
div.appendChild( p );

то это может быть вам полезно.

Проблема: когда создаёшь более, чем один элемент, вложенные друг в друга, код становится очень сложным.

Предлагаю простой инструмент решения задачи — функцию create() (исходник ниже). Например, создаём абзац текста:
var el = create( «p», { }, «Farewell, Love!» );

Или div с параграфом и ссылкой внутри него:
var div = create( «div», { id: «new», style: «background:#fff» },
create( «p», { align: 'center' },
«вступление: »,
create( 'a', { href: «ua.fishki.net/picso/kotdavinchi.jpg» },
«картинка» ),
": конец" )
);

Или вот, делаем таблицу:
var holder = document.getElementById( «holder2» );
var table;
var td;
holder.appendChild(
table =
create( «table», {id: 'ugly', cols:3},
create( «tbody», {},
create( «tr», {},
create( «td», { width: '10%' },
«hello» ),
td =
create( «td», { style: 'background: #fcc' },
«there» ),
create( «td», { Class: 'special2' }, «everywhere» )
)
)
)
);

Обратите внимание:

1. IE требует tbody элемент, иначе отказывается показывать таблицу.
2. Аттрибут class с чем-то конфликтует, поэтому приходится писать его как Class. Кажется, на результат это влияния не оказывает.
3. table = и tr = в примере позволяют сохранить созданные вложенные объекты для дальнейшей работы с ними.
4. Этот код работает и в IE, и в Mozilla, и в Opera.

Сама функция

function create( name, attributes ) {
var el = document.createElement( name );
if ( typeof attributes == 'object' ) {
for ( var i in attributes ) {
el.setAttribute( i, attributes[i] );

if ( i.toLowerCase() == 'class' ) {
el.className = attributes[i]; // for IE compatibility

} else if ( i.toLowerCase() == 'style' ) {
el.style.cssText = attributes[i]; // for IE compatibility
}
}
}
for ( var i = 2;i < arguments.length; i++ ) {
var val = arguments[i];
if ( typeof val == 'string' ) { val = document.createTextNode( val ) };
el.appendChild( val );
}
return el;
}

За идею следует благодарить Ивана Курманова,
Оригинальная статья с работающими примерами: ahinea.com/2006/04/14/javascript-dom-create