Как создать DOM элементы по имеющимся данным?

Question

[Mikhail Rerberg]

Задача:
screenshot.su/show.php?img=d66c644d4e46ed9e4d83bf0...

Код:
https://jsfiddle.net/NooNoo1488/0rujL2of/1/
(кое-где просто наброски)

Не могу создать DOM элементы по имеющимся данным.
Заранее благодарю!

Answer 1

[Stalker_RED]

У вас же там есть образец DOM элемента. В чем именно вопрос?

Comments

[Mikhail Rerberg]

Как его заполнить и,соответственно,вставить на страницу

[Stalker_RED]

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

Если без шаблонизатора, то в DOM есть примерно пол десятка способов вставить новый элемент. Один из самых быстрых и универсальных - собрать строку при помощи шаблонных строк, например, и вставить при помощи insertAdjacentHTML.

var obj = {
  name: 'Vasya',
  x: '300px',
  y: '200px'
},

str = `<div style="top: ${obj.y}; left: ${obj.x}">${obj.name}</div>`

document.body.insertAdjacentHTML('beforeend', str)

https://jsfiddle.net/svs5qgab/

[Mikhail Rerberg]

Благодарю!

[ElijahTr]

В контексте задания (тут оно неполностью описано) использование insertAdjacentHTML и html в js неверно.
Ищем в index.html раздел template оттуда и берем весь html.

В этой 10-шаговой демке все есть: https://up.htmlacademy.ru/javascript/11/demos/465

Answer 2

[lavezzi1]

Такие вопросы своему наставнику надо задавать.