如何使用 insertAdjacentHTML 渲染 html

Question

如何使用纯 javascript 渲染组件？ 我使用 insertAdjacentHTML 和 forEach 来呈现包含对象的列表，但对象似乎未定义。

object列表

const liRender = document.getElementById('ul-component')

function render() {

itens.forEach(() => {
    liRender.insertAdjacentHTML("afterbegin",
 ` <li class="products-list__item">
    <div class="products-list__item-thumbnail">
      <img
        class="product__thumbnail"
        src=${itens.img}>
        <div class="products-list__item-main-content">
        <h4 class="product__name">
          ${itens.modelo}
        </h4>
        <p class="product__description">
          ${itens.description}
        </p>
        <div class="products-list__item-action-buttons">
        <button class="button" data-open-modal="1">Detalhes</button>
        </div>
    </div>
  </li>
`

    )
})
}

export function Component() {
render()
}

结果列表返回未定义

Answer 1

您的forEach需要在iten传递。 像下面这样，

itens.forEach((iten) => {

然后你像这样引用每个属性，

<p class="product__description">
  ${iten.description}
</p>

 const liRender = document.getElementById('ul-component') const itens = [{ modelo: 'test', description: 'description', img: 'image' }, { modelo: 'test 2', description: 'description 2', img: 'image' }, { modelo: 'test 3', description: 'description 3', img: 'image' }]; function render() { itens.forEach((iten) => { liRender.insertAdjacentHTML("afterbegin", ` <li class="products-list__item"> <div class="products-list__item-thumbnail"> <img class="product__thumbnail" src=${iten.img}> <div class="products-list__item-main-content"> <h4 class="product__name"> ${iten.modelo} </h4> <p class="product__description"> ${iten.description} </p> <div class="products-list__item-action-buttons"> <button class="button" data-open-modal="1">Detalhes</button> </div> </div> </li> ` ) }) } render();

 <ul id='ul-component'> </ul>