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

【问题标题】：JavaScript Error...Not creating elements when the button is clickedJavaScript 错误...单击按钮时未创建元素
【发布时间】：2018-05-01 10:58:22
【问题描述】：

我的代码看起来像这样，它应该在单击“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");
            document.newRow.appendChild(newInput);
            document.newRow.appendChild(newInput2);
            document.newTable.appendChild(newRow);
            document.body.appendChild(newTable);  
        }
    });

【问题讨论】：

标签： javascript button event-listener createelement

【解决方案1】：

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

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);  
        }
    });

&lt;button id="submitButton" &gt;button&lt;/button&gt;

【讨论】：

【解决方案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>

【讨论】：