Javascript 元素为'；t克隆。。？

我在写一个基本的指令脚本。这基本上意味着无论你在文本框中键入什么（一个用于标题，另一个用于消息），然后按submit，你的评论都应该添加到页面中，youtube就是这样做的。我计划创建一个预构建的HTML div，并为每一条新的注释克隆它（当然还要更改文本以匹配）。问题是我的脚本无法运行按submit时，容器中不会克隆任何元素。这是我的问题。有什么问题

编辑：我更新了代码，新错误为（

无法读取null的属性'appendChild

）

window.onload=（）=>{
const template=document.comment；
const form=document.forms.comment；
const container=document.querySelector（“.container”）
form.submit2.addEventListener（'单击'，（）=>{
const name=form.name；
const text=form.text；
const newNode=template.cloneNode（true）；
newNode.classList.remove（'hidden'）
container.appendChild（newNode）
})
}

。隐藏{
显示：无；
}
.评论表格输入{
显示：块；
填充：2px；
}

演示
段落

window.addEventListener（'load'，e=>{
const template=document.querySelector（'.comment template'）；
const form=document.querySelector（'.comment form'）；
const container=document.querySelector（'.container'）；
form.querySelector（'.submit按钮'）。addEventListener（'click'，e=>{
const newNode=template.cloneNode（true）；
newNode.querySelector（'.name'）.innerText=
form.querySelector（'.name'）.value；
newNode.querySelector（'.comment'）.innerText=
form.querySelector（'.comment'）.value；
newNode.classList.remove（'hidden'）；
container.appendChild（newNode）；
});
});
。隐藏{
显示：无；
}
.评论表格输入{
显示：块；
填充：2px；
}



window.onload=（）=>{
让模板=document.comment；
//您有两个名为comment的元素。它被设置为
//表单，而不是您稍后可能尝试克隆的div。
日志（“我的模板”，模板）；
//因此，要解决这个问题，您可以通过它的类来选择元素
template=document.getElementsByClassName（'hidden'）[0]；
日志（“我的固定模板”，模板）；
const form=document.forms.comment；
日志（“我的表格”，表格）；
//getElementsByClassName返回类似数组的对象，即使存在
//只有一个元素匹配。使用[0]可以只获得一个元素
const container=document.getElementsByClassName（'container'）[0]；
日志（“我的容器”，容器）；
//使用您所说的更改名称来命名按钮
//submit2而不是submit，我们可以将click事件绑定到它
log（“我的提交按钮”，form.submit2）；
form.submit2.addEventListener（'单击'，（）=>{
让name=form.submit2.name；
console.log（“我的名字”，名字）；
//“name”元素不是submit按钮的子元素。它是
//具有自己名称的同级元素
//我们需要引用它，并获取值
name=form.name.value；
日志（“我的固定名称”，名称）；
让text=form.submit2.text；
日志（“我的文本”，文本）；
//文本也有同样的问题
text=form.text.value；
log（“我的固定文本”，text）；
const newNode=template.cloneNode（true）；
log（“我的新节点”，newNode.outerHTML）；
//如您所见，您克隆了节点，但尚未输入名称
//或文本。在将其附加到DOM之前需要这样做。
newNode.getElementsByTagName（'h1'）[0].innerText=name；
newNode.getElementsByTagName（'p'）[0].innerText=text；
log（“我的固定新节点”，newNode.outerHTML）；
newNode.classList.remove（'hidden'）；
container.appendChild（newNode）；
})
}
。隐藏{
显示：无；
}
.通讯输入{
显示：块；
填充：2px；
}

演示
段落

问题在于我在HTML元素中添加了空格。切勿在
=
符号周围添加空格。脚本本身没有问题。
form.submit
也
name
和
text
不是submit按钮的子项。@Taplar很好的一点。我修复了这个问题，并将其命名为
submit2
。问题是，脚本仍然不起作用。你看到我的第二条评论了吗？@Taplar
name
和
text
不是submit按钮的子项。这解释了很多。错误现在是容器。appendChild不是函数。这很可能是可以修复的。

“还修复了容器最初作为类似数组的对象返回，而不是一个元素，这就是为什么追加子元素不起作用的原因。这不是真的，因为即使我更改了它，它也不起作用。您更改了所有变量、标记，因此，这里的更改有点难看。您能否解释一下，当您甚至不使用

e

时，为什么使用

addEventListener

和

e

参数？您还可以解释一下为什么使用addEventlistener而不仅仅是

window.onload

？脚本中没有区别实际上，您能告诉我如何更改代码以使其正常工作，而不是重写全部内容吗？

const container=document.getElementsByClassName（'container'）