динамическое создание элементов

[Маэстро]

О да, и какая разница! При создании объёмного HTML кода DOM методами у вас такая неподдерживаемая каша в коде будет, мама не горюй.

Не понял, почему каша? Все созданные объекты хранятся либо в нумерованном массиве, либо в одном общем объекте, либо снабжаются уникальными именами (переменных).

И то, и другое -- разметка.

Не хотелось бы вдаваться в глубокую философию, но...
По-моему, написание функций создания (DOM) объектов и управления ими - это программирование.
Что есть по-Вашему программирование? Написание функций сложения 2+3?

[Kolyaj]

Очевидно что каждую ячейку надо снабдить своим id, каждый из которых будет вида "cell_xxx_yyy", где xxx-номер строки, а yyy-номер столбца.

Очевидно надо подучить DOM. table.rows[4].cells[29]

И вообще, доказывать общий случай ну очень частным как-то неправильно.

[Kolyaj]

Не понял, почему каша?

Ну это вы, наверно, про таблицу всё. А вы попробуйте произвольную разметку посоздавать с дивами, с инлайн-элементами, с картинками. И что у вас получится.

[Маэстро]

Очевидно надо подучить DOM. table.rows[4].cells[29]

я знаю, что такое table.... rows ... cells
а также t.insertRow() ... r.insertCell()...
Пример с таблицей я привёл очень упрощённый. В задаче, с которой приходилось сталкиваться мне, объекты находились не в строго структурированной таблице, к которой можно было бы обратиться по номеру строки и столбца. Точнее, они могли представлять сразу группы объектов, которые в свою очередь содержали другие группы...

[Маэстро]

Ну это вы, наверно, про таблицу всё. А вы попробуйте произвольную разметку посоздавать с дивами, с инлайн-элементами, с картинками. И что у вас получится.

Пробовал. Вот: http://gigalit.com.ua

[Kolyaj]

// создание wincontainer выше
wincontainer.innerHTML='<div class="videowin"  onmousedown="return GigDrag(event,this,'+wh+');"</div>';  // вся соль - в строке return... ;)
winobj=wincontainer.firstChild;
wincontainer.removeChild(winobj);
G.videowin=winobj;


if (bg0)                                                                        // фон 0
{
obj=d.createElement('div'); obj.className='vw0'; winobj.appendChild(obj);
G['videowinbg0']=obj;
}

if (bg1)
{
obj=d.createElement('div'); obj.className='vw1';
winobj.appendChild(obj);
G.videowinver=obj;
}


if (bg2)
{
obj=d.createElement('div'); obj.className='vw2';
winobj.appendChild(obj);
G.videowinhor=obj;
}


obj=d.createElement('div');                                                     // Tttle Window
obj.className='vw4';
obj.innerHTML=title;
if (title != '') obj.style.display='block';
winobj.appendChild(obj);
G.videowintitle=obj;


obj=d.createElement('div');                                                     // внутренняя часть окна
obj.className='vw5';
winobj.appendChild(obj);
G.videowininside=obj;


obj=d.createElement('div');                                                     // кнопка закрытия окна (vw6 for IE!)
obj.className='vw6';
 objclose=d.createElement('img');
 objclose.className='vw7';
 objclose.onclick=function() {closevideowin(wh);}
 objclose.align='right';
 objclose.src = 'close7.jpg';
 if (IE) objclose.style.marginRight=4;
obj.appendChild(objclose);
if (Fclose) obj.style.display='block';
winobj.appendChild(obj);
G.videowinclose=obj;


obj=d.createElement('img');                                                     // картинка "loading"
obj.className='vw8';
obj.src = 'loading42.gif';
  obj.id='videowinloading'+wh;
if (Floading) obj.style.display='block';
winobj.appendChild(obj);
G.videowinloading=obj;


G.NoMoveIn = [];
G.videowin = winobj;
d.body.appendChild(winobj);

Для поддержки вёрстки нужно понимать её структуру. Грубо говоря, понимать, какой html-код строит картинку на экране. Кто по данному коду может восстановить html-код?

[Маэстро]

Для поддержки вёрстки нужно понимать её структуру. Грубо говоря, понимать, какой html-код строит картинку на экране. Кто по данному коду может восстановить html-код?

1. Вы выхватили кусочек кода с главной страницы, который уже устарел, не очень удачный и был взят из другого старого проекта. бОльшая же часть js-кода лежит отдельно и подгружается по мере запуска пользователем разных функций. В подгружаемых модулях панели "конструируются" из отдельных готовых блоков (юнитов).
Например, вот так:

var s='<b>Шаг 1.</b> Выберите картинку из предложенного списка';
m.s1 = settextbgpanelunit(0,v,360,h, 'mcellbg','mtext', 10,5, s);
m.s1.container.onclick = step1;
p.appendChild(m.s1.container);

s='<b>Шаг 2.</b> Введите поздравительный текст';
m.s2 = settextbgpanelunit(0,v*2,360,h, 'mcellbg','mtext', 10,5, s);
m.s2.container.onclick = step2;
p.appendChild(m.s2.container);

s='<b>Шаг 3.</b> или выберите текст из предложенного списка';
m.s3 = settextbgpanelunit(0,v*3,360,h, 'mcellbg','mtext', 10,5, s);
m.s3.container.onclick = step3;
p.appendChild(m.s3.container);

s='<b>Шаг 4.</b> Определите шрифт текста, размер и цвет';
m.s4 = settextbgpanelunit(0,v*4,360,h, 'mcellbg','mtext', 10,5, s);
m.s4.container.onclick = step4;
p.appendChild(m.s4.container);

s='<b>Шаг 5.</b> Выберите музыкальное сопровождение';
m.s5 = settextbgpanelunit(0,v*5,360,h, 'mcellbg','mtext', 10,5, s);
m.s5.container.onclick = step5;
p.appendChild(m.s5.container);

s='<b>Шаг 6.</b> Добавьте прикольный смайлик к открытке';
m.s6 = settextbgpanelunit(0,v*6,360,h, 'mcellbg','mtext', 10,5, s);
m.s6.container.onclick = step6;
p.appendChild(m.s6.container);

s='<b>Шаг 7.</b> Введите адрес получателя открытки';
m.s7 = settextbgpanelunit(0,v*7,360,h, 'mcellbg','mtext', 10,5, s);
m.s7.container.onclick = step7;
p.appendChild(m.s7.container);

2. Если оочень грубо говоря, то "Кто по данному коду может восстановить html-код" - пусть это Вас не беспокоит. Для этого есть люди. Да и зачем его восстанавливать?

[Kolyaj]

Вы выхватили кусочек кода с главной страницы, который уже устарел и не очень удачный

Уж какой нашёл, и его-то не так просто было найти.

Вы не привели примера создания элементов.

Для этого есть люди.

Это они пока есть, пока проект горяченький, через полгода вы сами в этом коде ничего не разберёте. И не надо забывать про эффект грузовика.

Да и зачем его восстанавливать?

Если вёрстка "поплывёт", или её нужно будет чуть-чуть поменять, то для этого нужно представлять текущий html. А это сделать затруднительно.

пусть это Вас не беспокоит

Меня это не беспокоит.

[x-yuri]

-привычка писать быстроработающий и кроссбраузерный код позволит в дальнейшем программисту накопить опыт и написать фреймворк. А мало ли... может и прийдётся...?

привычка искать узкие места позволит программисту в дальнейшем писать быстроработающий код

-речь идёт не об ускорении в 1 мс, а (грубо говоря) замедлении в 1 мс НА КАЖДЫЙ добавленный элемент. И если элементов на странице 1000, то, замедление хорошо заметно.

-покажу на моём примере с таблицей 100х100.

в том то и дело, что пример синтетический. Давайте сравним на реальном примере, вы ставите задачу, мы ее реализовываем и сравниваем результаты

[Маэстро]

в том то и дело, что пример синтетический. Давайте сравним на реальном примере, вы ставите задачу, мы ее реализовываем и сравниваем результаты

Реальный пример я показать не могу, т.к. это закрытый сайт для логистических операций по управлению транспортными грузопотоками.
Но в некотором будущем, возможно, частично это будет выставлено на всеобщее пользование и будет представлять что-то вроде web-excell-таблиц. Надеюсь, что реализовывать будете бесплатно

Хотя, думаю, что Google, или Мicrosoft сделают это быстрее...