Question

我有一个问题，让div成为另一个div的孩子。我想学习如何在javascript中执行此操作。

我想基本上创建这个：

<body>
 <div id = "graph">
  <div id "data">
  </div>
 </div>
</body>

使用javascript。最终目标是一遍又一遍地创造其中许多。

这是我到目前为止的代码：

var graph = document.createElement('div');
graph.id = "graph";
document.body.appendChild(graph);

var barWrapper = document.createElement('div');
barWrapper.id = "data";

以上工作没有错误。当我添加：

document.getElementbyId("graph").appendChild("data");

我得到＆＃34;未捕获类型错误：未定义不是函数＆＃34;。

根据我的研究，这似乎是每个人的建议。另外，就我所知，appendChild函数似乎是完整的。我错过了什么？提前谢谢!!

Answer 1

你应该像对待身体一样追加一个物体。

var parent = document.getElementById("graph");
parent.appendChild(barWrapper);

编辑：

你也不需要在这里调用getElementById。您应该能够将子项附加到父项，然后将父项附加到正文。像这样：

var graph = document.createElement('div');
graph.id = "graph";

var barWrapper = document.createElement('div');
barWrapper.id = "data";

graph.appendChild(barWrapper);
document.body.appendChild(graph);

Answer 2

您的问题（导致类型错误）是您尝试追加字符串，而不是对子元素本身的引用。

var parent = document.createElement("div");
parent.id = "graph";
var child = document.createElement("div");
child.id = "data";
parent.appendChild(child);

Answer 3

错误是由错字引起的，它应该是getElementById

document.getElementbyId("graph")
>TypeError: undefined is not a function

当您修复并执行代码时，您将获得

document.getElementById("graph").appendChild("data")
>NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.

这是因为您尝试追加字符串而不是实际的html节点。你还需要先抓住元素

document.getElementById("graph").appendChild(document.getElementById("data"));

由于您已经引用了这两个对象，因此可以使用更清晰的解决方案

grap.appendChild(barWrapper);

Answer 4

有几个问题

document.getElementbyId("graph")应为document.getElementById("graph")
.appendChild("data")应为.appendChild(bargraph)

这个JS有效：

var graph = document.createElement('div');
graph.id = "graph";
document.body.appendChild(graph);

var barWrapper = document.createElement('div');
barWrapper.id = "data";
document.getElementById("graph").appendChild(barWrapper);

在这里小提琴：http://jsfiddle.net/hatvjete/

在javascript（DOM）中创建另一个div的div

4 个答案: