如何将评论追加到动态创建的图书列表项下方？

你的核心问题是没利用好JavaScript的闭包特性——在addItem函数里创建的review按钮的点击回调，能直接访问同作用域下的item变量（也就是对应的图书项h2元素）。

只需要在review.onclick函数的最后，把注释掉的代码替换成：

item.appendChild(comment);

为什么之前的尝试无效？ #

• document.body.appendChild(comment)：会把评论追加到整个页面的末尾，而非对应图书项下方
• document.h3.appendChild(comment)：语法错误，document.h3不是合法的DOM获取方式，你没有指定具体的h3元素

修改后的完整JS代码 #

// 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");
  item.setAttribute("class", "listItem");

  // 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);

  document.getElementById("book").value = "";
  document.getElementById("author").value = "";
  document.getElementById("series").value = "No series";

  // removes the list item when the "x" button is clicked
  remove.onclick = function() {
    document.body.removeChild(item);
  }

  // asks the user for review input and appends it to the list item
  review.onclick = function() {
    // gets input from the user for a star rating and their written review of the book
    let stars = prompt("Rate this book out from 1 to 5 (insert numerical values only):");
    let reviewText = prompt("Write a short review for this book:");

    // creates an h3 element to contain the review
    let comment = document.createElement("h3");
    // 给评论加类名方便样式控制
    comment.setAttribute("class", "book-review");

    // creates a text node to include in the h3
    let commentText = document.createTextNode("Stars: " + stars + "  " + reviewText);

    // appends the text node to the h3
    comment.appendChild(commentText);

    // 关键修改：把评论追加到对应的图书项下方
    item.appendChild(comment);
  }
}

额外优化建议 #

1. 不要直接把图书项加到document.body，可以在HTML里添加专门的容器（比如<div id="book-list"></div>），然后用document.getElementById("book-list").appendChild(item)，页面结构更清晰，后续操作也更方便。
2. 给评论元素添加类名，方便用CSS设置样式，区分图书项和评论。

内容的提问来源于stack exchange，提问作者lem0njeans_