Question

我有div.I打算循环一个数组并创建html元素并将其保存在数组＆amp;一旦迭代完成，我想将其附加到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

未捕获的TypeError：无法在'Node'上执行'appendChild'：参数1不是'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标记）。该值始终为字符串。

当浏览器检测到节点内容或其后代的更改时，它会触发 re-flow 。或者重新绘制节点简单地说。解析节点中的任何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);

Answer 2

我怀疑你的语句content[i]["checkBoxTemplate"]是否会按照你想要它做的，因为content[i]是一个元素，你将它与字符串组合在一起，所以最终会得到一个看起来像{的字符串{1}}

除了[object someHTMLElement]之外，您可以使用createElement或createElementNS创建每个元素，然后使用setAttribute（或等效项）来适当地设置属性。

您的代码看起来像这样

insertAdjacentHTML

使用javascript将子项附加到div

2 个答案: