Javascript 未捕获类型错误：未能执行'；追加儿童'；在'；节点'；：参数1的类型不是'；节点'；。在HTMLButtonElement.comm

我是JavaScript的初学者，我想接受两个输入并在底部屏幕上以输入文本的形式打印书面文本，就像to-do应用程序JavaScript一样，但我遇到了提到的错误。（见附件）

JS代码

var array=[];

function naam() 
{

var list = document.createElement("ul");        
var inputname=document.getElementById("nameplace").value;     
   list.innerText=inputname;    
    array.push(list);    
    if (inputname ==""|| inputname == " "){    
        alert("kuch tu likho");
    }    
    else {    
        var naam1= document.getElementById("naamprint");    
        naam1.appendChild(list);    
    }
}


var array1=[];

function comm() {    
    var list1=document.createElement("ul");    
    var inputname1=document.getElementById("commentplace").value;    
    list1.innerText=inputname1;    
    array1.push(list1);    
    if (inputname1 =="" || inputname1 ==" "){
        alert("kuch to likho");
    }
    else {

        var naam2=document.getElementById("commentprint");    
        naam2.appendChild(comm);
    }
}

var action=document.getElementById("btn");    
action.onclick=naam;    
action.onclick=comm;

HTML

<p>Name <input type="text" id="nameplace"></p>
<p>Comment <input type="text" id="commentplace" ></p>
<button id="btn"> submit </button>
<p><b id="naamprint"></p></b>
<p><b id="commentprint"></p></b>
<script src="app.js"> </script>

名称

评论

提交

快速回答

naam2.appendChild(comm); // error because comm is not an element that you can append

改为

naam2.appendChild(list1);

另外，您定义了一个侦听器，并重新定义了它

action.onclick=naam;    // this will never execute
action.onclick=comm;

改为

action.addEventListener('click', naam);
action.addEventListener('click', comm);

还有几点意见：

a。先关闭内部标签

<p><b id="naamprint"></p></b> // change to </b></p>
<p><b id="commentprint"></p></b> // same situation

可以简化为这样

commentprint.appendChild(comm);

c。ul标签

var list1=document.createElement（“ul”）
ul
标签应包含
li
标签，而不是文本

d。价值空间。这：

if (inputname1 =="" || inputname1 ==" "){ ...

最好用这个来改变

if (!inputname1.trim()){ ...

comm
中的
comm
函数指函数本身，它不是元素。您需要附加
list1
，而不是
comm
。另外，
ul
元素不能将文本节点作为直接内容，因此设置
list1.innerText=inputname1不会做你认为它会做的事。嗯。。。至少FF将文本节点直接放置到
ul
元素，但这是无效的HTML。。。请看。现在我在评论上写的内容并按提交打印内容，但名称不在屏幕上。我不想同时在屏幕上打印名称和评论。提前感谢您可能需要在HTML中添加一个静态空
ul
元素，并创建
li
元素，向其中添加一些文本，然后将
li
附加到现有的
ul
元素中？@lealcelderio看起来您已经从问题中编辑出了HTML部分？非常感谢@qiAlexWelcome，Saad。是的，ul不代表文本，蒂姆。老实说，这个例子中几乎每一行都不是完美的，我只是建议使用最小值来让代码正常工作，现在答案解决了所有的问题，甚至还有一些额外的=）。谢谢你，蒂姆：）
if (!inputname1.trim()){ ...