Пример использования 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

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@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,529
	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,529
	06.03.2014, 05:50
	Каждому овощу свой фрукт. Добавление бывает разное, в пустой контейнер, в середину контейнера, а не только в конец или начало, и не всегда нужно "старое" содержимое контейнера. 0