Question

这是我的代码：

var turn = 1;
var boardPiece;
var piece = [];
function init() {
  boardPiece = document.getElementById("pages");
  while (boardPiece.firstElementChild) {
    if (typeof boardPiece.firstElementChild.id != 'undefined') {
      piece.push(boardPiece.firstElementChild);
    }
    boardPiece.removeChild(boardPiece.firstElementChild);
  }
  document.getElementById("content").innerHTML = piece[0]; //My problem is here
}
init();

<div id="content">
</div>
<div id="pages">
  <div id="page1" class="page">
    ...
  </div>
  <div id="page2" class="page">
    ...
  </div>
</div>

结果是文字

[object HTMLDivElement]

不是元素。

我的.innerHTML出了什么问题？什么是typeof piece[0]？是text吗？

Answer 1

您需要替换：

document.getElementById("content").innerHTML = piece[0];

with：

document.getElementById("content").innerHTML = piece[0].innerHTML;

您尝试执行的操作是将元素（对象）作为纯文本插入。

Answer 2

您需要使用.innerHTML以及piece[0]变量，例如

document.getElementById("content").innerHTML = piece[0].innerHTML;

工作小提琴： https://jsfiddle.net/gs0yy50t/

希望这有帮助！

Answer 3

问题是piece[0]的类型不是字符串，而是HTML元素。因此，为了将其分配给内容的innerHTML（字符串），JavaScript隐式调用piece[0].toString()方法。

在HTML节点中调用toString()方法时（与JavaScript中的大多数非字符串对象一样），它returns a string表示对象的类型。

如果您需要将元素 piece[0]添加为content的孩子，那么您应该这样做：

document.getElementById("content").innerHTML = piece[0].outerHTML;

但是，如果您需要将一个元素的内容复制到另一个元素中，则应使用属性innerHTML代替：

document.getElementById("content").innerHTML = piece[0].innerHTML;

基本上，两个属性都是带有元素HTML代码的字符串，但outerHTML包含根元素本身。

如何通过innerHTML或其他方式将元素放入<div>？

3 个答案: