如何返回javascript DOM元素对象,并从调用者appendChild(obj)它
How to return javascript DOM Element Object, and appendChild(obj) it from caller?
我有一个javascript函数drawGrid()创建一个表,行和单元格。如果在函数中添加appendChild(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'类型。
我怎么能返回表,所以它到达时仍然记得它是一个实例的节点和HTMLElement,所以我可以appendChild(表)?
在整个代码下面:
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);
误差看起来像table
是Grid
,而不是一个HTML表本身,你应该使用(new Grid()).drawGrid()
来获得表,然后你可以追加到一个HTML元素。
相关文章:
- 你能调用一个在调用者上下文中返回的函数吗
- Web Worker postMessage({})何时返回给调用者
- 当javascript是单线程时,谁是onreadystatechange的调用者
- 函数调用者无效元素
- Javascript - make 函数在函数完成时告诉调用者
- 将数据传回jQuery插件的调用者元素
- Javascript在调用者“方法”之间更改变量
- 如何识别点击事件ember.js的调用者
- 用被调用者的尾部调用函数'的参数列表
- javascript可以在调用者之后定义被调用者,以及如何解析它
- 如何从严格模式获取调用者
- 是否可以在javascript中获取调用者上下文
- 对JavaScript中调用者元素的引用
- 为什么在JavaScript中可以引用调用者中的参数
- 主干自定义事件:获取调用者对象
- 将参数传递给回调函数时,与回调函数的调用者发生冲突
- 隔离作用域/将数组传递给指令调用者的好方法
- 多个调用者可以使用Babel await关键字订阅同一个异步函数吗?
- 如何打印所有调用者祖先
- 如何返回javascript DOM元素对象,并从调用者appendChild(obj)它