Пример использования createDocumentFragment()

@zangetsu · Регистрация: 05.11.2011

Студворк — интернет-сервис помощи студентам

Доброго времени суток. нашёл пример использования createDocumentFragment(), но не могу понять как его переделать для создания div в котором будут находится 3 кнопи с разными value и id. Подскажите или посоветуйте другой пример. Заранее благодарен.

JavaScript
1
2
3
4
5
6
7
8
9
10
function makeRow() {
  var fragment = document.createDocumentFragment()
  var td_1 = document.createElement('TD')
   
  fragment.appendChild(td_1)
  ...
  fragment.appendChild(td_n)
 
  return fragment
}

Добавлено через 2 часа 4 минуты
забыл уточнить, div создаётся каждый раз как нажимается кнопа

@tilperions · 05.03.2014, 17:04

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function makeRow() {
  var fragment = document.createDocumentFragment()
  var div = document.createElement('div');
  div.id = 'some id';
 div.value = 'some value';
   
  fragment.appendChild(div)
  ...
  fragment.appendChild(div_n)
 
  return fragment
}

Думаю, дальше понятно как

@kalabuni · 05.03.2014, 17:05

объясняю, для чего вообще нужен метод createDocumentFragment ()

положим, на странице у вас уже имеется тег <div id="myDIV">Текст</div>
и вам надо добавить в конец тег три параграфа <p>Мама</p>, <p>мыла</p> и <p>раму</p>

если вы создадите эти три параграфа методом createElement () и по очереди добавите их вовнутрь div'а методом appendChild (), то задачу вы решите, однако, при этом у вас трижды будет перерисовываться страница (ибо после каждого добавления меняется её геометрия)

чтобы перерисовывать страницу при добавлении нескольких тегов всего один раз и был придуман createDocumentFragment () - создаёте пустой виртуальный (ибо он ещё не на странице) DocumentFragment, виртуально же добавляете в него методом appendChild () три параграфа и один раз уже реально добавляете этот фрагмент на страницу

у вас же нет задачи в существующий на странице тег добавить три кнопки
вам надо добавить на страницу новый тег <div> с тремя кнопками внутри
так что вам не нужен метод createDocumentFragment ()

создавайте методом createElement () четыре "виртуальности" - div и три кнопки
виртуально добавляйте эти три виртуальные кнопки в виртуальный же div методом appendChild ()
и затем этим же методом appendChild () уже реально добавьте свой div с кнопками в какой-то тег страницы

всё понятно?

@newJS · 05.03.2014, 21:22

У фрагмента есть одна особенность, он "растворяется" при добавлении, то есть сам фрагмент не добавляется, а выступает в роли виртуального контейнера.

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

@kalabuni · 05.03.2014, 22:45

"добавление строкой с помощью innerHTML" затирает все изменения предыдущего кода
например, ввели вы в каком-то контейнере в инпут какое-то слово, а потом скрипт добавил в этот же контейнер какой-то код с помощью
контейнер.innerHTML += 'строка'
и всё - из-за этого переписывания введённое в инпут слово пропадёт

так что в большинстве случаев DOM-методы рулят

@newJS · 06.03.2014, 05:50

Каждому овощу свой фрукт.
Добавление бывает разное, в пустой контейнер, в середину контейнера, а не только в конец или начало, и не всегда нужно "старое" содержимое контейнера.

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	05.03.2014, 17:05
	объясняю, для чего вообще нужен метод createDocumentFragment () положим, на странице у вас уже имеется тег <div id="myDIV">Текст</div> и вам надо добавить в конец тег три параграфа <p>Мама</p>, <p>мыла</p> и <p>раму</p> если вы создадите эти три параграфа методом createElement () и по очереди добавите их вовнутрь div'а методом appendChild (), то задачу вы решите, однако, при этом у вас трижды будет перерисовываться страница (ибо после каждого добавления меняется её геометрия) чтобы перерисовывать страницу при добавлении нескольких тегов всего один раз и был придуман createDocumentFragment () - создаёте пустой виртуальный (ибо он ещё не на странице) DocumentFragment, виртуально же добавляете в него методом appendChild () три параграфа и один раз уже реально добавляете этот фрагмент на страницу у вас же нет задачи в существующий на странице тег добавить три кнопки вам надо добавить на страницу новый тег <div> с тремя кнопками внутри так что вам не нужен метод createDocumentFragment () создавайте методом createElement () четыре "виртуальности" - div и три кнопки виртуально добавляйте эти три виртуальные кнопки в виртуальный же div методом appendChild () и затем этим же методом appendChild () уже реально добавьте свой div с кнопками в какой-то тег страницы всё понятно? 1

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,531
	05.03.2014, 21:22
	У фрагмента есть одна особенность, он "растворяется" при добавлении, то есть сам фрагмент не добавляется, а выступает в роли виртуального контейнера. Добавление строкой с помощью innerHTML еще быстрей, приходилось воевать со временем при генерации большого количества тегов. Во всех браузерах этот метод быстрей, а зачастую и по коду меньше. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	05.03.2014, 22:45
	"добавление строкой с помощью innerHTML" затирает все изменения предыдущего кода например, ввели вы в каком-то контейнере в инпут какое-то слово, а потом скрипт добавил в этот же контейнер какой-то код с помощью контейнер.innerHTML += 'строка' и всё - из-за этого переписывания введённое в инпут слово пропадёт так что в большинстве случаев DOM-методы рулят 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,531
	06.03.2014, 05:50
	Каждому овощу свой фрукт. Добавление бывает разное, в пустой контейнер, в середину контейнера, а не только в конец или начало, и не всегда нужно "старое" содержимое контейнера. 0