在javascript中添加按钮而不使用html

Question

我正在尝试在不使用 HTML 的情况下在 javascript 文件中添加一个按钮，我需要将它放在循环内的列中，但是当我单击按钮调用该函数时，它会显示它正在查看的错误HTML文件中的按钮！ 我该如何解决？

    function success(name) {
        let info = "<div class='infoTable'>";
        for (let i = 0; i < name.length; i++) {
            info += "<div class='info'>";
            info += "<div class='fcol'>" + (i+1) + "</div>";
            info += "<div class='scol'>" + name[i].item + "</div>"; 
            info += "<div class='fcol'>" + name[i].quantity + "</div>";
            info += '<button onclick="deletee(\'' + name[i].ID + '\')"> Delete This<button />';
            info += "</div>";
        }
        info += "</div>";
        printItems.innerHTML = info;
    }

这是功能

    function deletee(id){
        let url  = "server/delete.php?id=" + id;
        console.log(url);
        fetch(url, { credentials: 'include' })
            .then(response => response.text())
            .then(getList)
    }

这是错误

(index):1 Uncaught ReferenceError: deletee is not defined 在 HTMLButtonElement.onclick ((index):1) onclick@（索引）：1

Answer 1

在这种情况下最好的解决方案是使用document.createElement:https://www.w3schools.com/jsref/met_document_createelement.asp

这比将字符串转换为 DOM 元素更好。

由于您没有发布所有代码，如果我们看不到您尝试执行的功能，我们将无法提供进一步帮助。

我建议使用 JS 而不是将字符串转换为 DOM 的原因是大多数 IDE 会识别丢失、拼写错误或错误使用的函数。这可能是你的错误。

这是一个例子：

var colsToAdd = 5;
var rowsToAdd = 25;

function FillTable() {
  //Get existing table or create a new one. Append to parent if create
  var table = document.getElementById("testTable");

  //Clear table
  table.innerHTML = "";

  //Create your rows using a for loop
  for (var i = 0; i < rowsToAdd; i++) {
    var row = document.createElement("TR");
    table.appendChild(row);

    //Create your columns using a for loop
    for (var k = 0; k < colsToAdd; k++) {
      {
        var col = document.createElement("td");
        row.appendChild(col);
        if (k == colsToAdd - 1) {
          var button = document.createElement("button");
          button.type = "button";
          //Button click event is an anonymous function
          button.onclick =
            function(r) {
              return function() {
                table.removeChild(r);
              }
            }(row)
          button.innerHTML = "Delete";
          col.appendChild(button);
        } else {
          col.innerHTML = "row " + i + " column " + k;
        }
      }
    }
  }
}

table {
  border: 1px solid #000;
  margin: 1em;
}

td {
  border: 1px solid #000;
  padding: 1em;
}

<div>
  <h1>Heading</h1>
  <button onclick="FillTable()">Fill table</button>
  <table id="testTable">

  </table>
</div>