Javascript: изменение innerHTML vs display

Я разрабатываю веб-форму, где я хочу, чтобы различные входные данные появлялись в зависимости от того, что пользователь ранее выбрал. Поэтому мне было интересно, в чем разница между наличием пустого div и изменением того, что он содержит с помощью innerHTML, и наличием нескольких элементов div, установкой отображения на none и изменением того, что должно отображаться в зависимости от ввода пользователя.

Спасибо!

5 2
javascript innerhtml

5 ответов:

Почти всегда гораздо эффективнее скрывать и показывать элементы по мере необходимости, а не создавать их и затем уничтожать.

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

Еще одно преимущество заключается в том, что Javascript не будет работать, если пользователь отключил его или использует браузер, который его не поддерживает, например, средство чтения с экрана. Если все ваши элементы присутствуют в исходном HTML, то страница, по крайней мере, будет иметь некоторый смысл для этих пользователей.

2

Как правило, вы должны касаться innerHTML как можно меньше, а не работать с командами javascript, такими как createElement и appendChild.

Многие манипуляции innerHTML в javascript рассматриваются как своего рода анти-паттерн.

Тем не менее, если у вас есть одна форма или 2-3 формы, вы идете вперед и делаете то, что работает для вас. То есть то, что вы видите как более легкий для понимания и более доступный для обслуживания код.

В этих масштабах я сомневаюсь, что кто-нибудь заметит производительность выигрыш / дефект при использовании любого из этих подходов. Лично я бы, наверное, поставил дисплей на ноль.

2

Если у вас готов div, просто измените дисплей:

  • код проще
  • у вас есть только одно место хранения для вашего контента (divs)
  • dom не должен быть пересчитан двигателем

Это стандартное решение при работе, например, с вкладками.

1

Если вы измените элементы с помощью innerHTML, то при отправке формы будут отправлены только те входные данные, которые показаны.

Скрывая элементы с помощью display, они все еще присутствуют в форме и все еще будут представлены.

1

Это будет быстрее, если вы выбираете divs по классам и идентификаторам и включаете и выключаете их. Однако я бы просто использовал innerHTML, если его просто простой текст, потому что вы не заметите разницу в скорости. Если нет причины иметь разные дивы, то есть выборки имеют резко различное содержание, то есть, возможно, график против текста против таблицы, то я бы сделал разные дивы.

Короче говоря, они оба делают одно и то же.
0