Question

这是我的JS代码：

c#

我正在尝试执行以下操作：

使用数据创建一个div（img，alt，url，heading，text），然后对于每个div，我想注入一个模板。

然而，当我到达代码的最后一行时，chrome dev工具给我这个错误：“无法在'Node'上执行'appendChild'：参数1不是'Node'类型。”

我不明白出了什么问题，“这个”是当前的$（“。card”）被循环而我只是附加了模板变量的子项，我的想法，这应该工作......

感谢阅读，我希望你能帮到我，因为我很难过。

Answer 1

鉴于您已经在使用jQuery，为什么不使用：

$(this).append(template);

请记住，jQuery this循环中的.each()是对当前 DOM节点的引用。如果您想将其视为jQuery对象，则需要将其包装（$(this)）。

解释实际的错误消息：

“无法在'Node'上执行'appendChild'：参数1不是'Node'类型。”

不抱怨this不是“Node”类型，它抱怨template不是。 domNode.appendChild()方法只接受实际的DOM节点，而jQuery的$().append()更加健壮（接受DOM节点，另一个jQuery集合，HTML字符串等）。

Answer 2

appendChild需要一个实际的元素（类型为Node），而不是字符串，所以你必须在纯JS中这样做：

var image = document.createElement('img');
    image.setAttribute('alt', this.dataset. alt)
    image.setAttribute('src', this.dataset.img)
this.appendChild(image);

var header = document.createElement('h3');
    header.textContent = this.dataset.heading;
this.appendChild(header);

var paragraph = document.createElement('p');
    paragraph = this.dataset.text;
this.appendChild(paragraph);

创建每个元素，然后像上面一样将它们追加到父元素之后。当然，简单的jQuery解决方案采用字符串：$(this).append(string);。

Answer 3

你需要使用$（this）而不是这个并且不附加appendChild

   $(this).append(template);

另一个解决方案是

   this.innerHTML += template;

JS中的appendChild问题

3 个答案: