CreateElement из строки

@drmedus · Регистрация: 13.12.2012

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

Добрый.
Имею ajax запрос, который возвращает мне кусок разметки. Но возвращает он мне ее в виде строки.
Далее мне нужно эту разметку запихнуть в DocumentFragment.

тоесть мне нужно написать примерно такой код

JavaScript
1
2
3
var fragment = document.createDocumentFragment();
var node = document.createElement(xhr.responseText);
fragment .appendChild(node);

но беда в том что в createElement я не муго передать ответ ajax чтобы создать ноду, а в appendChild нужно передать именно ноду. как быть подскажите пож.

Добавлено через 4 часа 39 минут
неужели никто не поможет?)

@Fedor Vlasenko · 13.04.2017, 00:30

HTML5
1
<div id="test"></div>

JavaScript
1
2
3
4
5
6
7
window.onload = function() {
  var fragment = document.createDocumentFragment();
  var div = document.createElement("div");
  div.innerHTML  = '<div>My test</div>';
  fragment.appendChild(div.childNodes[0]);
  test.appendChild(fragment);
};

Как вариант

@j2FunOnly · 13.04.2017, 09:41

drmedus, element.insertAdjacentHTML()

@drmedus · 13.04.2017, 09:57 **[ТС]**

j2FunOnly, вот так не работает

JavaScript
1
2
3
4
var fragment = document.createDocumentFragment();
var node = document.createElement('div');
node.insertAdjacentHTML('afterbegin',xhr.responseText);
fragment .appendChild(node);

или я не так понял?

@cyb0rg_01 · 13.04.2017, 10:03

HTML5
1
xhr.responseText

выложите полный код с асинхронным кодом

@drmedus · 13.04.2017, 10:24 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var rowTemplate = document.createDocumentFragment();
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'templates/row.html', false);
                xhr.send();
                if (xhr.status != 200) {
                    alert( xhr.status + ': ' + xhr.statusText ); // пример вывода: 404: Not Found
                } else {
                    var node = document.createElement('div');
                    node.insertAdjacentHTML('beforebegin',xhr.responseText);
                    rowTemplate.appendChild(node);
                    return rowTemplate;
                }

Добавлено через 1 минуту
в row.html просто кусочек простого html

@Padimanskas · 13.04.2017, 10:56

JavaScript
1
2
3
4
5
var fragment = document.createDocumentFragment();
var element = document.createElement('div');
element.innerHTML = '<h1>hello!</h1>';
fragment.appendChild(element.children[0]);
document.body.appendChild(fragment);

@drmedus · 13.04.2017, 10:57 **[ТС]**

Padimanskas, спасибо, сам нашел только что это решение. На поверхности было.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	13.04.2017, 09:41
	drmedus, element.insertAdjacentHTML() 0

@drmedus 27 / 22 / 6 Регистрация: 13.12.2012 Сообщений: 159
	13.04.2017, 10:57 [ТС]
	Padimanskas, спасибо, сам нашел только что это решение. На поверхности было. 0

CreateElement из строки

Решение