使用javascript一次添加多个HTML元素

我试图添加4个“tr”元素，每个元素都包含4个“td”元素，但我不太知道怎么做。我可以使用单个td添加单个tr，但不能添加多个tr

这是我不完整的代码。问题出在我写的地方“//问题出在这里！！！”。非常感谢您的帮助

/*///INITIAL TITLE//*/
var initialTitle=document.createElement（“h1”）；
var intialTitleContent=document.createTextNode（“请按键盘上的\“1\”键”）；
initialTitle.appendChild（intialTitleContent）；
文件.body.appendChild（缩写标题）；
/*///KEYDOWN代码*/
window.addEventListener（“keydown”，checkKeyPress，false）；
功能检查按键（按键）{
如果（key.keyCode==“49”）/“1”
{
var pElement=document.createElement（“p”）；
var content=document.createTextNode（“欢迎！此页面为
完全由javascript编写。这是完全不切实际的
以这种方式创建网页。此网页只是一个
演示如何使用javascript创建和添加
HTML元素和CSS添加到HTML文档中。您可以添加内容
按“1”至“9”键）；
pElement.appendChild（内容）；
文件.正文.附件（PELENT）；
}
//问题就在这里！！！
否则如果（key.keyCode==“50”）/“2”
{   
var i；
var tableDiv=document.createElement（“div”）；
tableDiv.classList.add（“div_1”）；
var tableElement=document.createElement（“表”）；
var treelements=document.createElement（“tr”）；
var tdElements=document.createElement（“td”）；
tdElements.classList.add（“tableCell”）；
对于（i=0；i<4；i++）{
多变量=
tableDiv.appendChild（tableElement）；
tableElement.appendChild（三元素）；
附加子元素（tdElements）；
}
document.body.appendChild（多）；

纯Javascript站点

您可以使用innerHTML更轻松地执行此操作

tableDiv.innerHTML = `
  <table>
    <tbody>
      <tr>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
      </tr>
      <tr>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
      </tr>
      <tr>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
      </tr>
      <tr>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
      </tr>
    </tbody>
  </table>  
`;

tableDiv.innerHTML=`
`;

---

我喜欢这种方法，因为它更清楚HTML的外观。当然，当你有很多标记时会有一个截止点，用这种方法处理会变得不切实际，但在这一点上，也许值得研究一下类似于u.js模板的东西：

你应该在循环内创建

tdElement

，然后附加Into

treelement

。还将

treelement

，

tableElement

附加到循环外部的

tableDiv

window.onload=function（）
{
var tableDiv=document.createElement（“div”）；
var tableElement=document.createElement（“表”）；
var treelement=document.createElement（“tr”）；
tableDiv.classList.add（“div_1”）；
tableElement.setAttribute（“边框”、“1”）；
对于（var i=1；i或

您需要创建要添加的节点元素的新实例。否则，如果您再次尝试附加该元素，则该元素的相同实例将被移动

例如，这将创建一个包含4行4列的表：


const mainEl=document.getElementsByTagName（'main'）[0]；
const tablel=document.createElement（'table'）；
while（tablel.childNodes.length感谢大家的帮助。非常感谢。通过结合我从大家那里学到的知识，我将它付诸实施：


window.addEventListener（“keydown”，checkKeyPress，false）；
功能检查按键（按键）{
//第1节-解释本页内容和操作的段落。
如果（key.keyCode==“49”）/“1”
{
var pElement=document.createElement（“p”）；
var content=document.createTextNode("欢迎！此页面完全由javascript组成。以这种方式创建网页是完全不切实际的。此页面只是演示如何使用javascript创建HTML元素和CSS并将其添加到HTML文档中。这意味着在HTML文档中，元素只包含指向javascript代码的链接以及添加了avascript代码。您可以通过按“1”到“9”键添加内容。然后，可以通过按“s”键来设置每项内容的样式。）；
pElement.appendChild（内容）；
文件.正文.附件（PELENT）；
}
//第2节-表格
否则如果（key.keyCode==“50”）/“2”
{
var tableDiv=document.createElement（“div”）；
var tableElement=document.createElement（“表”）；
tableDiv.classList.add（“div_1”）；
对于（var z=1；z），您应该在每个循环迭代中创建新元素（
tr
和
td
）。在循环之前创建将始终使用相同的内存位置，并且只使用一个元素。示例代码：非常感谢。我知道我已经接近答案了。我从未使用过“innerText”“在这之前，我必须进一步研究它是如何工作的。干杯。
new Array(4)
    .fill(new Array(4).fill(0))
        .map(array => { 
            var td = document.createElement('tr'); 
            array.forEach(e => td.appendChild(document.createElement('td'))); 
            return td;  
            }).forEach(p => console.log(p))