Array of DOM elements output casts to String

Question

Я столкнулся с проблемой с выводом сгенерированных элементов DOM.

function createDomElements(man) {
  const { name, image, height, weight} = man;

  const manDetails = createElement({ tagName: 'div', className: 'modal-body' });
  const elementData = [createElement({ tagName: 'span', className: 'man-name' }).innerText = name
    , createElement({ tagName: 'img', className: 'man-image', src: image })
    , createElement({ tagName: 'span', className: 'man-height' }).innerText = height
    , createElement({ tagName: 'span', className: 'man-weight' }).innerText = weight]

  elementData.forEach((element) => manDetails.append(element))
  return manDetails;
}

Мне нужно добавить внутренний текст в каждом, но когда я делаю это, элементы приводятся к String. У меня нет возможности добавить его с атрибутом CSS content. Любые идеи?

Answer 1

Когда вы прямо в массиве создаете элемент и сразу же ему сетите текстовое значение, то результатом присваивания является, собственно, присваиваемое значение. Итого слева направо

createElement(...) => element
    element.innerHTML = text => text


const a = 5 // => 5
const b = true // => true
divEl.innerHTML = 'From Russia with fever' // => 'From Russia with fever'

И поэтому append ожидает Node или DomString в качестве аргумента, получает String, и добавляет текстовый узел в DOM.

Можно создать свой jQuery.

const createElement = tagName => {
  const _el = document.createElement(tagName);
  return {
    className(_cl) {
      _el.className = _cl;
      return _el;
    },
    innerHTML(html) {
      _el.innerHTML = html;
      return _el;
    },
    src(_src) {
      _el.src = _src;
      return _el;
    }
  }
}

И заполняйте массив примерно так:

const elementData = [
  createElement('span').className('man-name').innerHTML(name)
  ...и дальше по тексту
];

В конце концов, если не хотите создавать свою функцию, а менять createElement нет возможности, то просто объявите переменные:

name, image, width, height

Положите их в массив после всех присваиваний и конфигураций

const elementData = [name, image, width, height];
container.append(elementData);

БЛОГ НА HUSL

Array of DOM elements output casts to String

Ответы (1 шт):