JavaScript 错误...单击按钮时未创建元素

Question

我的代码看起来像这样，它应该在单击“submitButton”时创建一个 table，但它没有这样做。这是我的代码：

submitButton.addEventListener("click", () => {
        var newTable = document.createElement("table");
        for(let i = 0; i < parseInt(numOfStudents); i++){
            var newRow = document.createElement("tr");
            var newInput = document.createElement("td");
            var newInput2 = document.createElement("td");
            document.newRow.appendChild(newInput);
            document.newRow.appendChild(newInput2);
            document.newTable.appendChild(newRow);
            document.body.appendChild(newTable);  
        }
    });

Answer 1

您不能访问带有正文的元素。您需要使用 DOM 函数，如 getElementById 等。如果它是在您的循环中新创建的元素，您可以直接附加到它们，如下所示

var numOfStudents=10
submitButton=document.getElementById("submitButton")
submitButton.addEventListener("click", () => {
        var newTable = document.createElement("table");
        for(let i = 0; i < parseInt(numOfStudents); i++){
            var newRow = document.createElement("tr");
            
            var newInput = document.createElement("td");
            var newInput2 = document.createElement("td");
           
            newRow.appendChild(newInput);
            newRow.appendChild(newInput2);
            newTable.appendChild(newRow);
            document.body.appendChild(newTable);  
        }
    });

<button id="submitButton" >button</button>

Answer 2

你只需要在其中添加一些文本..否则你将看不到它（除非你打开开发控制台）。

这是一个例子：

// Helpers
const createElement = el => document.createElement(el)
const createText = text => document.createTextNode(text)

// Create rows
const addStudentRows = students => {
  const $body = document.querySelector('body')

  const $table = createElement('table')

  for (let i = 0; i < students;i++ ) {
    let $td1 = createElement('td')
    let $td2 = createElement('td')

    $td1.appendChild(createText('Hello'))
    $td2.appendChild(createText('World'))

    let $tr = createElement('tr')
    $tr.appendChild($td1)
    $tr.appendChild($td2)

    $table.appendChild($tr)
  }

  $body.appendChild($table)
}

// Event listener
document.querySelector('button')
  .addEventListener('click', e => addStudentRows(1))

table {
  margin-bottom: 10px;
}

table tr td {
  padding: 10px;
  border-right:1px solid #f0f0f0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

table tr td:first-child {
  border-left:1px solid #f0f0f0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <button>Click here</button>
</body>
</html>

JavaScript 错误...单击按钮时未创建元素

JavaScript Error...Not creating elements when the button is clicked

javascript

button

event-listener

createelement