我正在做一个网站，在这个网站上，你可以将项目添加到你想要阅读的书籍列表中，然后按下按钮来查看它。您也可以按另一个按钮来删除该项目。一切都很顺利，直到我添加了前面提到的按钮。一旦我开始为它们添加代码，之前添加到网页上的项目就不会显示出来了。我使用createElement()和appendChild()方法。我希望按钮被附加到我放在h2上的其他文本旁边。但现在什么都没有了。我试过重新排序代码，我已经多次检查变量，但我根本找不到问题的根源。如果能帮忙找出原因，我将不胜感激。
我正在使用replit.com
// listens for a click on the "add new" button
document.getElementById("new").addEventListener("click", newBook);
let newdiv = document.getElementById("newdiv");
// takes information about a new list item
function newBook() {
// reveals the input boxes needed
newdiv.style.display = "inline-block";
}
// listens for a click on the "add" button
document.getElementById("enternew").addEventListener("click", addItem);
// creates a new list item and adds it to the body of the webpage
function addItem() {
// defines the new element as an h2 element
let item = document.createElement("h2");
// gets the variable values from the user's input
let bookname = document.getElementById("book").value;
let authorname = document.getElementById("author").value;
let seriesname = document.getElementById("series").value;
// converts the user's input into text nodes
let b = document.createTextNode(bookname);
let a = document.createTextNode(", by " + authorname);
let s = document.createTextNode(" (" + seriesname + ")");
// creates buttons to initiate the review process and remove the list item
let review = document.createElement("button");
let remove = document.createElement("button");
// creates a text node for the review button and appends it to the button element
let rv = document.createTextNode("REVIEW");
review.appendChild(rv);
// creates a text node for the remove button and appends it to the button element
let rm = document.createTextNode("✖");
remove.appendChild(rm);
// appends the text nodes to the h2 element
item.appendChild(b);
item.appendChild(a);
item.appendChild(s);
// appends the buttons to the h2 element
item.appendChild("review");
item.appendChild("remove");
// adds the h2 element, including all the text nodes, to the body of the webpage
document.body.appendChild(item);
review.onclick = function() {
alert("test");
}
remove.onclick = function() {
alert("test 2");
}
}html {
height: 100%;
width: 100%;
background-color: #D2AB8B;
}
.header {
font-family: "Cutive Mono";
font-size: 50px;
width: 100%;
border-bottom-style: dashed;
border-bottom-width: 4px;
padding-bottom: 30px;
color: #413013;
}
p {
font-family: "EB Garamond";
font-size: 18px;
color: #413013;
}
.df {
border-width: 0px;
font-size: 20px;
font-family: "EB Garamond";
background-color: #FFF6E3;
color: #413013;
}
button:hover {
background-color: #ACD9DC;
border-width: 0px;
}
#newdiv {
display: none;
}
input {
font-size: 20px;
font-family: "Cutive Mono";
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Reading List</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=EB Garamond">
</head>
<body>
<center>
<!-- page header -->
<h1 class="header">~ YOUR READING LIST ~</h1>
<br/> <br/>
<!-- add new section for new book entry -->
<button class="df" id="new">ADD NEW +</button>
<br/>
<!-- hidden division that contains input fields to add a new entry -->
<div id="newdiv">
<p>Book name:</p>
<input id="book" />
<br/>
<p>Author name:</p>
<input id="author" />
<br/>
<p>Series name (optional):</p>
<input id="series" />
<br/> <br/>
<button class="df" id="enternew">ADD</button>
</div>
</center>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge-v2.js" theme="teal" position="bottom-right"></script>
</body>
</html>查看控制台。"Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."
当你想要添加字符串时，你正在尝试添加字符串
item.appendChild(review);
item.appendChild(remove);