javascript - 使用 javascript 将子项附加到 div

Question

我有 div。我打算循环遍历一个数组并创建 html 元素并将其保存在一个数组中，迭代完成后我想将其附加到 div 中。这是我所做的:

var bodyContent;
var a = document.getElementById("content");
console.log(content);
for(var i = 0,l = content.length; i<l;i++) {
    bodyContent+="<li><span>"+content[i]["checkBoxTemplate"]+"</span><span>"+content[i]["item"]+"</span></li>";
}
a.appendChild(bodyContent);

但它抛出了这个错误:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

也尝试过使用innerHTML

到底哪里出了问题？我知道可以使用 jQuery 来完成，但我严格想使用 javascript。请帮忙。谢谢。

Answer 1

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

有什么区别:

node.appendChild 需要一个节点。节点是一个对象。它代表 HTML、XHTML、XML 标记。它们可以使用 document.createElement("node_name") 以编程方式创建，其中 node_name 是节点的名称，例如div 或使用 document.getElementById() 等函数从 DOM 检索。

示例:

var a = document.getElementById("content");
var b = document.createElement("span"); //node
a.appendChild(b);

node.innerHTML 获取或设置内容(带有 html 标记)。该值始终是一个字符串。

当浏览器检测到节点内容或其后代发生更改时，它会触发重新流。或者简单的说重绘节点。节点中的任何 html 标记都会被解析。 innerHTML as setter 清空当前内容并将其替换为新内容。

示例:

var a = document.getElementById("content");
var b = "<span>content</span>"; //string
a.innerHTML = b;

node.insertAdjacentHTML() 更高级。它将字符串添加到节点的内容或元素外部。它不会覆盖内容，而是根据标志将新内容放入节点内部或外部。

您可以设置四种类型的标志(来自 MDN )

• beforebegin 在元素本身之前。
• afterbegin 就在元素内部，第一个子元素之前。
• beforeend 就在元素内部，在其最后一个子元素之后。
• afterend 在元素本身之后。

示例:

var a = document.getElementById("content");
var b = "<span>content</span>"; //string
a.insertAdjacentHTML("afterend", b);