如何返回JavaScript的DOM元素對象，並從調用方appendChild（obj）？

我有一個JavaScript函數drawGrid（），它創建一個表，行和單元格。如果我在函數內部追加Child（表格），一切都很好，表格會顯示出來。如何返回JavaScript的DOM元素對象，並從調用方appendChild（obj）？

但我想回到表並執行追加在調用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);

Uncaught TypeError：無法執行'節點'上的'appendChild'：參數1不是'節點'類型。

如何返回表，以便它仍然記得它是Node和HTMLElement的一個實例，所以我可以appendChild（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);

錯誤

來源

2016-09-18 Daniela

貌似table爲Grid，而不是HTML表格本身，您應該使用(new Grid()).drawGrid()來獲取表格，然後您可以將其附加到HTML元素。

來源

2016-09-18 20:39:00

謝謝Marat。你指出我的方向是正確的，儘管你的答案不會產生預期的結果。我需要從構造函數中刪除drawGrid（）函數，也不需要所有參數，但重要的變化是在drawGrid定義中用原型版本（不是cols，但是this.cols）替換變量。現在我可以返回表格，比如var table = new Grid（..），然後appendChild（table.drawGrid（））。謝謝！ – Daniela

如何返回JavaScript的DOM元素對象，並從調用方appendChild（obj）？

回答

相關問題