javascript - 如何返回 javascript DOM 元素对象，并从调用者那里appendChild(obj)它？

Question

我有一个JavaScript函数drawGrid()，它创建一个表格、行和单元格。如果我在函数内追加Child(table)，一切都很好，表格就会显示。

但我想返回表格并在调用drawGrid()的函数中进行附加

这里是drawGrid()的结束:

console.log(table instanceof HTMLElement) // true
console.log(table instanceof Node)        // true
return table;

我调用drawGrid()的地方:

var table = new Grid()....
console.log(table instanceof HTMLElement) // false
console.log(table instanceof Node)        // false
......appendChild(table);

未捕获类型错误:无法在“Node”上执行“appendChild”:参数 1 不是“Node”类型。

如何返回表格，以便它到达时仍记住它是 Node 和 HTMLElement 的实例，以便我可以追加Child(table)？

整个代码如下:

  function Grid(rows, cols, cellSize, line, thicker, xDivision, yDivision, gridColor, topMargin, opacity) {
    Shape.apply(this, arguments);
    this.rows = rows;
    this.cols = cols;
    this.cellSize = cellSize;
    this.line = line;
    this.thicker = thicker;
    this.xDivision = xDivision;
    this.xAccent = rows/xDivision;
    this.yDivision = yDivision;
    this.yAccent = cols/yDivision;
    this.topMargin = topMargin;
    this.opacity = opacity;
    this.gridColor = gridColor;
    this.drawGrid(this.rows, this.cols, this.cellSize, this.line, this.thicker, this.xAccent, this.yAccent, this.gridColor, this.topMargin, this.opacity);
  };
  Grid.prototype = Object.create(Shape.prototype);
  Grid.prototype.constructor = Grid;

  Grid.prototype = {
      drawGrid: function(rows, cols, cellSize, line, thicker, xAccent, yAccent, gridColor, topMargin, opacity) {
          var table = document.createElement("TABLE");
          table.setAttribute("id", "hundred_square");
          table.style.cssText +=';'+ "width: "+ (cols*cellSize) +"vw; height: "+ (rows*cellSize) +"vw; border-collapse: collapse; border: "+ (5*line) +"vw solid" +gridColor+ "; margin: " +topMargin+ "vw auto;";
          for(var i=0; i < rows; i++){
              var row = document.createElement("TR");
              table.appendChild(row);
              row.style.cssText += ';' + "opacity: "+ opacity +"; filter: alpha(opacity="+ (opacity*100) +");";
              for(var j=0; j < cols; j++){
                var cell = document.createElement("TD");
                row.appendChild(cell);
                cell.style.cssText += ';' + "width: "+ cellSize +"vw; height: "+ cellSize +"vw; border-right: "+ (j%yAccent==(yAccent-1) ? thicker*line : line) +"vw solid " +gridColor+ "; border-bottom: "+ (i%xAccent==(xAccent-1) ? thicker*line : line) +"vw solid " +gridColor+ ";opacity: 0."+ opacity +"; filter: alpha(opacity="+ (opacity*100) +");";
              }
          }
          //document.getElementById("js_animation").appendChild(table);
          console.log(table instanceof HTMLElement)   //true
          console.log(table instanceof Node)          //true
          return table;
      }
  };

以及其他地方:

var table = new sl.Shapes.Grid(10, 10, 3.5, 0.1, 5, 2, 2, "#bfbf8c", 4.5, 0.85);
console.log(table instanceof sl.Shapes.Grid) // true
console.log(table instanceof HTMLElement)    // false
console.log(table instanceof Node)           // false
document.getElementById("js_animation").appendChild(table);

错误

Answer 1

看起来 table 是 Grid，而不是 HTML 表格本身，您应该使用 (new Grid()).drawGrid()要获取表格，您可以将其附加到 HTML 元素。