Question

对不起，我是Javascript的新手，这是我制作的第一批网站之一。我想知道为什么我的代码无法正常工作。

而不是显示文本框和按钮，在它们应该显示的单元格中，显示[object HTMLInputElement]和[object HTMLButtonElement]。

function frenchBread(x){
      var table = document.getElementById("orderTable");
      var row = table.insertRow(0);

      var rem = document.createElement("button");
      var name = document.createTextNode("Remove");
      rem.appendChild(name);  

      var num = document.createElement("input");

        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        cell1.innerHTML = "French Bread";
        cell2.innerHTML = document.body.appendChild(num);
        cell3.innerHTML = document.body.appendChild(rem);
        x.disabled = true;

  }


<button type = "button" class = "itemClick" onclick  = "frenchBread(this);">French Bread</button>

<table id = "orderTable">
</table>

Answer 1

只需附加您的变量，无需致电innerHTML：

cell1.innerHTML = "French Bread";
cell2.appendChild(num);
cell3.appendChild(rem);

而不是：

cell1.innerHTML = "French Bread";
cell2.innerHTML = document.body.appendChild(num);
cell3.innerHTML = document.body.appendChild(rem);

FIDDLE

Answer 2

我在对代码进行调整之前添加了一些HTML，以便可以运行它。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button type = "button" class = "itemClick" onclick  = "frenchBread(this);">French Bread</button>
<table id="orderTable"></table>
<script>

function frenchBread(x){
  var table = document.getElementById("orderTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  var rem = document.createElement("button");
  var name = document.createTextNode("Remove");
  rem.appendChild(name);  

  var num = document.createElement("input");

    cell1.innerHTML = "French Bread";
    cell2.appendChild(num);
    cell3.appendChild(rem);
    x.disabled = true;
}
</script>
</body>
</html>

您的代码失败的原因是您分配给cel1的innerHTML的文本＆＃34; French Bread是有效的HTML。 innerHTML只能接受有效HTML的字符串。虽然它对cel2和cel3不起作用，因为rem和num是DOM元素。因此，通过使用这两个单元格元素的appendChild成员函数，它们可以被指定为cel2和cel3的子元素（也是DOM元素）。当您尝试通过innerHTML执行此操作时，JavaScript必须将这些DOM元素转换为文本，因此您看到的文本是由JS对象转换为字符串而生成的。

如何使用Javascript将文本框和按钮添加到表中？

2 个答案: