使用javascript将元素插入html

Question

我想问问有没有办法用javascript插入html内容，就像我有一张桌子，里面有一个tbody，里面有我要使用javascript插入元素的地方，就像我要插入tr一样，在tr里面要插入5 td，我希望那5 td具有不同的内容，如果您尝试将上述所有内容放入代码中，它将看起来像这样

for(let i = 1; i< 38; i++){
        
        let swd = {
            active: data.statewise[i].active,
            confirmed: data.statewise[i].confirmed,
            deaths: data.statewise[i].deaths,
            recovered: data.statewise[i].recovered
        }

        let swdb = document.getElementById('swdb');

        let swtr = document.createElement('tr');

        swdb.appendChild(swtr);

        for(let j = 1; j<6; j++){
            let swtd = document.createElement('td');
            swtr.appendChild(swtd);
        }
    }

对我来说，挑战是在同一tr的td中插入不同的内容。在那之后的最终html代码应该看起来像这样：-

                    <tr>
                        <td>Custom content 1</td>
                        <td id="active"> Custom content 2</td>
                        <td id="conf">Custom content 3</td>
                        <td id="deaths">Custom content 4</td>
                        <td id="recov">Custom content 5</td>
                    </tr>

之后，我将生成更多这样的tr。

希望您理解我的问题并为我提供帮助！

Answer 1

您只需要innerText在td中添加内容：

您可以像这样制作一个对象数组：

const customContent = [
    {id:"",content:"Custom content 1"},
    {id:"active",content:data.statewise[i].active},
    {id:"confirmed",content:data.statewise[i].confirmed},
    {id:"deaths",content:data.statewise[i].deaths},
    {id:"recov",content:data.statewise[i].recovered},
]

并像这样使用它们：

customContent.forEach(item => {
  let swtd = document.createElement('td');
  swtd.id = item.id;
  swtd.innerText = item.content;
  swtr.appendChild(swtd);
});

Answer 2

实际上与@ b3hr4d相同的示例，但您不应.innerHTML在纯文本上使用，请在.textContent和之间选择.innerText。祝你好运=）

const contentList = [
  { id: "", text: 'Custom content 1' },
  { id: 'active', text: 'Custom content 2' },
];

const tr = document.createElement('tr');
contentList.forEach(({ id, text }) => {
  const td = document.createElement('td');
  if (id) td.setAttribute('id', id);
  td.textContent = text;
  tr.appendChild(td);
});

const root = document.querySelector('#root');
root.appendChild(tr);

结果

<div id="root">
  <tr>
    <td>Custom content 1</td>
    <td id="active">Custom content 2</td>
  </tr>
</div>