Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Тонкости js (для опытных) (https://javascript.ru/forum/dom-window/38371-tonkosti-js-dlya-opytnykh.html)

zzzzzz 29.05.2013 20:20

Тонкости js (для опытных)
 
Здравствуйте
В переменную DATA попадет текст полученный в результате аякс запроса.

document.body.innerHTML += "<div id='video" + id + "' class='dialogV'>" + data + "</div>";


var div = document.createElement('div');
div.className = 'dialogV';
div.id = 'video' + id;
div.innerHTML = data;
document.body.appendChild(div);


Оба варианта идентичны
Как правильно, почему так.
Проясните пожалуйста хоть что нибудь, в голове пока каша.

dmitriymar 29.05.2013 20:37

Цитата:

Сообщение от zzzzzz
Как правильно, почему так.

По разному правильно и не только так -всё зависит от браузера и от особенностей конкретного браузера.

Если data это просто текстб то во втором варианте лучше не innerHTML, а текстовому узлу отдавать

Цитата:

Сообщение от zzzzzz
Тонкости js (для опытных)

Когда это стало тонкостью ? и почему только для опытных? -эта информация не является закрытой и есть как в http://learn.javascript.ru/ так и во многих других публикациях в т.ч и книгах

zzzzzz 29.05.2013 20:52

Цитата:

а текстовому узлу отдавать
А как это отдавать текстовому узлу?

Цитата:

Тонкости js (для опытных)
То есть не париться как реализовывать, главное чтобы работало? Если так то я с удовольствием. Просто когда что-то пишу постоянно задумываюсь а правильно ли этот момент реализовал?, как делают профессионалы? и еще много всякой сомнительности в голову лезет, и меня это чуть напрягает.

Aetae 29.05.2013 20:54

Цитата:

Сообщение от zzzzzz (Сообщение 253437)
Оба варианта идентичны

Не идентичны. Во втором случае происходит полная перезапись всего содержимого body, т.к. a += b равносильно a = a + b. Соответственно перерисовывается вся страница, сбрасываются все обработчики итд. Потому второй вариант предпочтительнее.

Также если data не содержит html то лучше добавлять её именно как текстовую ноду:
var div = document.createElement('div');
div.className = 'dialogV';
div.id = 'video' + id;
div.appendChild(document.createTextNode(data));
document.body.appendChild(div);

dmitriymar 29.05.2013 20:54

Цитата:

Сообщение от zzzzzz
То есть не париться как реализовывать, главное чтобы работало?

т.е посмотреть на тесты для разных браузеров уже готовые и определится какой вариант использовать . И теорию в учебнике почитать

zzzzzz 29.05.2013 21:24

В принципе понял, спасибо Вам огромное за ответы.

elnoro 29.05.2013 22:46

Я бы еще порекомендовал обратить внимание на читаемость исходного кода. Производительность - дело такое, критичное далеко не всегда, в отличие от читабельности.
Вот тут обсуждение на тему: http://habrahabr.ru/post/166109/ .


Часовой пояс GMT +3, время: 06:00.