Javascript 如何使用forEach将数组内的内容添加到innerHTML？

我想知道如何使用forEach将数组内的数据内容添加到innerHTML

出于某种原因，它没有出现。这可能吗？我以这种方式处理动态数据，我需要遍历数据并用innerHTML显示它们

const showPosts = (data, value) => {
    const btnDiscover = document.querySelector('[data-show="discover"]');

    const slides = data.add_post_slides;

    const Posts = () => {
        slides.length > 0 &&
            slides
                .forEach((el) => {
                    return <h2>123</h2>;
                })
                .join('');
    };

    // console.log(Posts());

    btnDiscover.addEventListener('click', (e) => {
        e.preventDefault();
        body.classList.add('toggle-legend', 'no-scroll');

        console.log('Discover clicked');
        console.log(slides);

        theContent = `
        <div class="modal">
            <div class="modal__body">
                <a href="#" id="close"><span class="modal__close"></span></a>

                ${Posts()}
            </div>
        </div>
        `;

        timelineModal.innerHTML = theContent;

        onModalClose();
    });
};

const showPosts=（数据、值）=>{
const btnDiscover=document.querySelector（“[data show=“discover”]”）；
const slides=data.add\u post\u幻灯片；
const Posts=（）=>{
幻灯片长度>0&&
幻灯片
.forEach（（el）=>{
返回123；
})
.加入（“”）；
};
//log（Posts（））；
btnDiscover.addEventListener（'单击'，（e）=>{
e、 预防默认值（）；
body.classList.add（'toggle-legend'，'no-scroll'）；
log（'Discover clicked'）；
控制台日志（幻灯片）；
内容=`
${Posts（）}
`;
timelineModal.innerHTML=内容；
onModalClose（）；
});
};

---

我怎么能做这样的事呢？

forEach不返回响应。使用

Array.map

或声明并初始化数组变量，然后推送它们

const newSlides = slides.map((el) => el)

或

//添加返回。箭头函数不返回元素。
const Posts=（）=>{
返回幻灯片长度>0&&
幻灯片
.forEach（（el）=>{
返回123；
})
.加入（“”）；
};

有很多方法。我可以建议使用getElementById选择元素。然后创建一个函数，该函数将在该元素的innerHtml中添加数据。尝试做下面类似的事情

var fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

function myFunction(item, index) {
  document.getElementById("demo").innerHTML += index + ":" + item + "<br>";
}

var水果=[“苹果”、“橘子”、“樱桃”]；
果实。forEach（myFunction）；
函数myFunction（项目、索引）{
document.getElementById（“demo”）.innerHTML+=index+“：“+item+”
”；
}

您的代码在帖子中有问题。因为它不是emit元素。添加

返回
。
// Add return. your arrow function don't return element.
const Posts = () => {
    return slides.length > 0 &&
        slides
            .forEach((el) => {
                return <h2>123</h2>;
            })
            .join('');
};

var fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

function myFunction(item, index) {
  document.getElementById("demo").innerHTML += index + ":" + item + "<br>";
}