При преобразовании массива в строку выводит [object HTMLParagraphElement]. Как исправить?

Question

[StepanSnigur]

Столкнулся с проблемой вывода вместо элемента массива строки '[object HTMLParagraphElement]'. В консоли выводит то, что должно - 3 html элемента, а при попытке вывода этих элементов на экран с помощью innerHTML выводит строку '[object HTMLParagraphElement]'.
Вот код js:

document.addEventListener('DOMContentLoaded', function() {
    //функция, перебирающая элементы
    let technologyHandler = (str) => {
        let techArr = str.split(' ');
        let techArrElem = techArr.map((el) => {
            let docElem = document.createElement('p');
            docElem.classList.add('project_technologies-item');
            docElem.innerHTML = el;
            return docElem;
        });
        return techArrElem;
    }
    let modal = document.getElementById('works-description'),
        closeModal = document.getElementById('close'),
        openElement = document.getElementsByClassName('openingFigure'),
        headline = document.getElementById('headline'),
        taskDescription = document.getElementById('task_description'),
        deadlinesDescription = document.getElementById('deadlines_description'),
        projectTechnologies = document.getElementById('project_technologies'),
        modalImg = document.getElementById('modal-img'),
        modalHref = document.getElementById('modal-href');
    for (let i = 0; i < openElement.length; i++) {
        openElement[i].addEventListener('click', function (e) {
            let handler = e.currentTarget;
            let modalTitle = handler.getAttribute('data-headline'),
                task = handler.getAttribute('data-task'),
                deadline = handler.getAttribute('data-deadline'),
                dataTechnologies = handler.getAttribute('data-technologies'),
                dataImg = handler.getAttribute('data-img'),
                dataHref = handler.getAttribute('data-href');

            modalImg.src = dataImg;
            headline.innerHTML = modalTitle;
            taskDescription.innerHTML = task;
            deadlinesDescription.innerHTML = deadline;
            projectTechnologies.innerHTML = technologyHandler(dataTechnologies).map((el) => el); //вывод элементов на экран
            modalHref.href = dataHref;
            modal.style.display = 'flex';
        });
    }
    closeModal.addEventListener('click', function() {
        modal.classList.remove('fade');
        modal.classList.add('fade-out');
        modal.addEventListener('transitionend', function () {
            modal.style.display = 'none';
            modal.classList.remove('fade-out');
            modal.classList.add('fade');
        });
    });
});

Вот html:

<div id="works-description" class="fade">
                <div class="works-description-block">
                    <a id="close">&#10006;</a>
                    <div class="img-block">
                        <img src="img/" id="modal-img" alt="image">
                    </div>
                    <div class="works-description-text">
                        <h2 id="headline">Site name</h2>
                        <h3>Задача</h3>
                        <p id="task_description"></p>
                        <h3>Сроки</h3>
                        <p id="deadlines_description"></p>
                        <div id="project_technologies"></div> //сюда вывожу элементы
                        <a id="modal-href" href="https://obogrevatel-ua.com/" target="_blank">Перейти на сайт</a>
                    </div>
                </div>
            </div>

           <figure data-img="img/digitalCrafters-bg.png" data-headline="DigitalCrafters" data-task="Верстка посадочной страницы по PSD макету" data-deadline="3 дня"             data-technologies="css html js" <-- элементы              data-href="http://siteportfolio.h1n.ru/DigitalCrafters/" class="openingFigure wow fadeInUp digitalCrafters-figure">
                    <figcaption>
                        <h2>Digital Crafters</h2>
                        <p>Верстка</p>
                    </figcaption>
                </figure>

Answer 1

[0xD34F]

Замените

projectTechnologies.innerHTML = technologyHandler(dataTechnologies).map((el) => el);

на

projectTechnologies.innerHTML = technologyHandler(dataTechnologies).map(n => n.outerHTML).join('');

// или

technologyHandler(dataTechnologies).forEach(n => projectTechnologies.appendChild(n));

ИЛИ

Перепишите technologyHandler следующим образом:

const technologyHandler = str => str
  .split(' ')
  .map(n => `<p class="project_technologies-item">${n}</p>`)
  .join('');

// или

const technologyHandler = str =>
  str.replace(/ ?(\S+)/g, '<p class="project_technologies-item">$1</p>');

И уберите map после её вызова:

projectTechnologies.innerHTML = technologyHandler(dataTechnologies);

Comments

[StepanSnigur]

Да, спасибо, я посмотрев на список свойств вспомнил про outherHTHL. Огромное спасибо