0

При вставке шаблона в html браузер вываливает ошибку в консоль, о том, что передаваемый параметр не является узлом DOM:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

Собственно, вопрос, как можно вставить шаблон в html-документ на ванильном скрипте? Хотелось бы в три строчки, как это делается на Jquery на оф. сайте handlebars

var data = {
      "array": [
    {
      "position": "one",
      "data": "Тут находятся какие-то данные"
    },
    {
      "position": "two",
      "data": "Тут находятся другие данные"
    },
    {
      "position": "three",
      "data": "Тут нет данных вообще, кроме этой записи"
    }
  ]
}

var source = document.getElementById("template").innerHTML;
var template = Handlebars.compile(source);

document.body.appendChild((template(data)));

2 ответа 2

1

В результате вызова функции template получается строка, которая была сформирована путем вставки данных в исходный шаблон. Пример с jQuery работает потому, что в jQuery.append можно передать HTML строку - jQuery ее самостоятельно распарсит, создаст элемент и добавит на страницу. Однако Node.appendChild принимает только уже существующий элемент. Это можно решить создав элемент вручную, назначив свойству элмента innerHTML значение получившийся HTML строки и добавив элемент на страницу. Как и в случае с jQuery браузер распарсит ее и создаст нужный DOM.

var html = template(data);

var container = document.createElement('div');
container.innerHTML = html;

document.body.appendChild(container);

Пример на JSBin

Добавлено

В примере выше будет создан дополнительный элемент, который оборачивает шаблон, что часто будет мешать. Можно обойтись без дополнительного элемента использовав DocumentFragment. Это так называемый контейнер, сам по себе не являющийся полноценным элементом, но поддержиавющий многие его функции. При вставке его на страницу, вставлено будет только его содержимое. Т.к. он не поддерживает innerHTML, то содержимое нужно будет перекинуть в него из "реального" промежуточного элемента:

var html = template(data);

var container = document.createElement('div');
container.innerHTML = html;

var fragment = document.createDocumentFragment();

// appendChild "вырезает" детей
while (container.childNodes[0]) {
    fragment.appendChild(container.childNodes[0]);
}

document.body.appendChild(fragment);

Пример на JSBin

3
  • - Какой метод в итогу будет работать быстрее? Исопльзование нативного DocumentFragment (который, насколько я знаю не из самых быстрых) или вставка при помощи jquery.html?
    – user189948
    Commented 12 дек. 2015 в 22:15
  • Вот есть тест для сравнения: documentFragment appendChild vs jquery append - по результатам моих запусков любая реализация с использованием jQuery всегда проигрывает на 60-80% Commented 12 дек. 2015 в 22:22
  • - Спасибо за помощь!
    – user189948
    Commented 12 дек. 2015 в 22:25
1

Решение в одну строчку, как было нужно по условию на vanillaJS:

Вместо: document.body.appendChild(container);

container.innerHTML = template(data);

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.