Подходы для создания динамического интерфейса из Ajax Response?

Question

Очень распространенный сценарий использования Ajax - это анализ ответа и создание пользовательского интерфейса для конечного пользователя. Я все еще новичок в словах Ajax и UI и вижу только два варианта создания UI с использованием ответа Ajax (JSON / XML),

1. CreateElement () и динамическое добавление / удаление элементов
2. Создать большую строку и установить innerHTML некоторого элемента

Теперь у меня следующий вопрос:

1. Пожалуйста, дайте мне знать, если есть что-то лучшее, что можно сделать?

2. Если я хотел бы прикрепить событие к динамически создаваемым элементам, как лучше это сделать? Я имею в виду, что во многих случаях я делаю что-то вроде

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

Answer 1

Я не вижу ничего плохого в этих двух подходах. Однако установка innerHTML лучше с точки зрения производительности. В некоторых случаях создание элементов динамически является единственным вариантом, вы можете захотеть взглянуть на documentFragment, чтобы избежать большого количества повторений (опять же по соображениям производительности).

ECMA определяет addEventListener для динамического добавления слушателей к вашим элементам. Вы также хотели бы прочитать о пузырях событий.

Answer 2

Попробуйте использовать существующие структуры пользовательского интерфейса Javascript, такие как YUI, JQuery или даже GWT. Это даст вам действительно хорошие варианты и гибкость в случае запросов XHR. Также вам может быть полезно узнать об управлении событиями в инфраструктурах пользовательского интерфейса - как только вы получите эту идею, вы можете использовать ее без этих рамок и здесь - смотрите события в HTML в google