Question

我尝试使用bb-item类将canvas子项添加到div中。

这是我目前的代码。

＆＃13;

var createImage = function(w, h) {
  var i = document.createElement("canvas");
  i.width = w;
  i.height = h;
  i.ctx = i.getContext("2d");
  return i;
}
var canvas = createImage(1024, 512);
var ctx = canvas.ctx;
document.getElementsByClassName('bb-item').appendChild(canvas);

＆＃13;

<div class="bb-item cover">
  <canvas></canvas>
</div>

＆＃13;

Answer 1

这是因为当你使用document.getElementsByClassName时，它会返回一个集合的DOM节点（即使只有一个元素与选择器匹配）：

返回具有所有给定类名的所有子元素的类数组对象。

这意味着您必须

选择集合中的第一个元素，如果您确定只想使用集合中的第一个元素，即：
```
document.getElementsByClassName('bb-item')[0].appendChild(canvas);
```

或者，如果您要将相同的方法应用于集合中的所有元素，则在应用.appendChild()方法之前迭代整个集合：

var bbItems = document.getElementsByClassName('bb-item');

for (var i = 0; i < bbItems.length; i++) {
  var bbItem = bbItems[i];
  bbItem.appendChild(canvas);
}

Answer 2

替换此声明：

document.getElementsByClassName('bb-item').appendChild(canvas);

用这个：

document.getElementsByClassName('bb-item')[0].appendChild(canvas);

var createImage = function(w, h) {
  var i = document.createElement("canvas");
  i.width = w;
  i.height = h;
  i.ctx = i.getContext("2d");
  return i;
}
var canvas = createImage(1024, 512);
var ctx = canvas.ctx;
document.getElementsByClassName('bb-item')[0].appendChild(canvas);

.bb-item{
  min-height: 400px;
  background-color: yellow;
}

canvas{
  background-color: white;
}

<div class="bb-item cover">
  <canvas></canvas>
</div>

试图将子项添加到div类

2 个答案: