Как сделать цикл из блоков на чистом js?

Question

[myspace]

Как сделать цикл типо ng-repeat в ангуларе, только на чистом js и без запихивания кучи html в переменную?

Answer 1

[abberati]

<div id="addHere"></div>

const arr = [1,2,3];

function addToElem(elem, data) {
  const elemInDom = document.querySelector(elem);
  if (!elemInDom) return;
  data.forEach(item => {
    const div = document.createElement('div');
    div.innerHTML = item;
    elemInDom.append(div);
  })
}

addToElem('#ddHere', arr);

вариант с string interpolation:

const arr = [{id: 1, name: 'one'}, {id: 2, name: 'two'}, {id: 3, name: 'three'}];

function createWonderfullP(data) {
  return `
    <p class="wonderfull-p">
      ${data.name}: <span>${data.id}</span>
    </p>
  `
}

function addToElem(elem, data) {
  const elemInDom = document.querySelector(elem);
  if (!elemInDom) {
    console.error('No such target element')
    return;
  };
  data.forEach(item => {
    const div = document.createElement('div');
    div.innerHTML = createWonderfullP(item);
    elemInDom.append(div);
  })
}

addToElem('#addHere', arr);

а теперь немного функциональной магии:

const arr = [{id: 1, name: 'one'}, {id: 2, name: 'two'}, {id: 3, name: 'three'}];

const createWonderfullP = (data) => `
    <p class="woderfull-p">
      ${data.name}: <span>${data.id}</span>
    </p>
  `;

const createDivWithContent = (content) => {
  const div = document.createElement('div');
  div.innerHTML = content;
  return div;
}

const getInserter = (parent) => (elem) => parent.append(elem);

function addToElem(elem, data) {
  const elemInDOM = document.querySelector(elem);
  if (!elemInDOM) {
    console.error('No such target element')
    return;
  };
  
  const insertInElemInDom = getInserter(elemInDOM);
  
  data
    .map(createWonderfullP)
    .map(createDivWithContent)
    .forEach(insertInElemInDom)
}

addToElem('#addHere', arr);

Comments

[myspace]

в случае с созданием элемента на js вариант хороший. Но если уже есть сверстанные блоки?

[riot26]

myspace: cloneNode, parentNode.appendChild

[Дмитрий Беляев]

myspace: вместо div вставлять div.firstElementChild

[myspace]

благодарю!

[myspace]

как сделать чтобы вот такой "item =>"синтаксис замыкания поддерживался?

[abberati]

myspace: установить последнюю версию браузера. или прогнать код через babel

[myspace]

abberati: спасибо!