Question

我有一个由javascript库生成的div元素。我们假设其ID为auto

我手动创建了一个ID为manual的HTML div元素。

如何将生成的div#auto移动到div#manual？

生成的div元素不是文档树的一部分。所以我不能appendChild将auto置于manual

之下

有什么想法吗？

＆＃13;

var element = document.createElement("div");
element.id = 'generated';

var el = document.getElementById('element');
console.log(el)

＆＃13;

<div id="manual">Place #generated as child of me</div>

＆＃13;

正如您所看到的，我无法将生成的div元素#generated作为目标，因为它不在文档树中。如果我无法选择它，我就无法将其放在#manual下。

Answer 1

在您的代码中：

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

var el = document.getElementById('element');
console.log(el)

element 已经对该元素的引用。没有理由尝试通过getElementById再次查找;只需使用你的参考。 getElementById找不到它，因为它还不在DOM中。

所以只需使用element：

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

document.querySelector("#manual").appendChild(element);
// -------------------------------------------^

在那个点，它在DOM中，getElementById会找到它（但是，你不需要;你已经在{{1}中引用了它}}）。

实例：（我添加了边框，并为生成的div提供了一些内容，以明确结果是什么）

element

var element = document.createElement("div");
element.id = 'generated';
element.innerHTML = "generated";

document.querySelector("#manual").appendChild(element);

div {
  border: 1px solid black;
  padding: 2px;
}

请注意，生成的div上不需要<div id="manual">Place #generated as child of me</div>来执行此操作。如果你有一个不同的原因，它有id，那很好，但你不需要它：

id

var element = document.createElement("div");
element.innerHTML = "generated";

document.querySelector("#manual").appendChild(element);

div {
  border: 1px solid black;
  padding: 2px;
}

如何在手动创建的div下追加生成的div？

1 个答案: