Javascript 为什么可以'；t我附加到a<；p>；标签？

我正在编写一个ToDo列表webapp脚本，我正在尝试使用4个文本框的内容来创建ToDo项的内容

当前，当我尝试连接从表单生成的元素时，出现错误

TypeError:未能在“节点”上执行“appendChild”：参数1不是“节点”类型。
在HTMLButtonElement.document.getElementsByClassName.onclick中

我目前正在使用一个函数来创建要附加到ToDo项主体的元素，我相信我正在从函数返回一个元素。代码发布在下面

document.getElementsByClassName('modal-accept-button')[0].onclick = function () {
    var formVals = {
        what: document.getElementById('todo-input-what').value,
        where: document.getElementById('todo-input-where').value,
        when: document.getElementById('todo-input-when').value,
        who: document.getElementById('todo-input-who').value,
        details: document.getElementById('todo-input-details').value
    };

    document.getElementsByTagName('main')[0].appendChild(function () {
        var fields = ["where", "when", "who", "details"];
        var root = document.createElement("SECTION").className = "todo";
        var title = document.createElement("H2").value = formVals.what;
        var body = document.createElement("DIV").className = "todo-body"

        for (var i = 0; i < fields.length; i++) {
            var currentField = fields[i];
            var currentVal = formVals.currentField;

            body.appendChild(function () {
                var p = document.createElement("P").className = "indent-wrapped";
                var span = document.createElement("SPAN").class = currentField;
                var text = document.createTextNode(currentVal);
                span.value = currentField + ": ";
                p.appendChild(span);
                p.appendChild(text);

                return p;
            });
        }
        root.appendChild(title);
        root.appendChild(body);

        return root;
    });
    resetModal();
}

document.getElementsByClassName（'modal-accept-button'）[0]。onclick=function（）{
变量formVals={
内容：document.getElementById（'todo-input-what'）。值，
其中：document.getElementById（'todo-input-where'）。值，
当：document.getElementById（'todo-input-when'）。值，
who:document.getElementById（'todo-input-who'）。值，
详细信息：document.getElementById（'todo-input-details'）.value
};
document.getElementsByTagName（'main'）[0].appendChild（函数（）{
变量字段=[“地点”、“时间”、“人员”、“详细信息”]；
var root=document.createElement（“节”）.className=“todo”；
var title=document.createElement（“H2”）.value=formVals.what；
var body=document.createElement（“DIV”）.className=“todo body”
对于（变量i=0；i
变量
p
不是项（HTML“节点”）；它是一个字符串

也就是说，因为您使用序列赋值（最后一个值会一直返回）给它赋值了一个字符串--
“缩进包装”
进入
className
，然后
className
进入
p

将项目创建与类分配分开：

var p = document.createElement("P")
p.className = "indent-wrapped"


root
、
title
和
span
也是如此。它们都以相同的方式分配字符串。
您可以将字符串
缩进包装
分配给
p
，如下面的代码段所示。因此，您尝试对字符串而不是节点调用
appendChild
。拆分分配，以便首先将节点分配给p，并在下一条语句中设置其类名。其他元素（root、title、body等）也是如此，您尝试在同一语句中创建元素并设置它们的属性之一


var p=document.createElement（“p”）.className=“缩进包装”；
控制台日志（p）
root
、
title
、
span
和
p
不是节点，它们是字符串。除非您的body元素具有id“body”，否则您需要通过调用
document.body.appendChild（函数（）{…
）来引用它；在这两种情况下，您的代码都是一团乱麻，因此毫无用处