使用JavaScript动态向对话框添加文本失败，求解决方案

先修正你代码里的错误 #

你的代码没生效主要有两个问题：

• 给元素加类名的方式错了：classList.add是方法，不是属性，不能直接赋值，而且类名不需要带.，正确写法是newDialog.classList.add('new-dialog');
• dialog元素默认是隐藏状态，创建后需要调用showModal()或者show()才能让它显示出来

修正后的基础代码：

const myLibrary = ['Harry Potter','The God of Small Things'];
function Book() {
  for (let book of myLibrary) {
    const newDialog = document.createElement('dialog');
    // 修正类名添加方式
    newDialog.classList.add('new-dialog');
    newDialog.textContent = book;
    document.body.appendChild(newDialog);
    // 让对话框显示出来
    newDialog.showModal();
    console.log(book);
  }
}
Book();

关于用div包裹文本的方式 #

这种方式完全可行，而且更推荐。因为后续如果要给书籍信息加样式（比如书名加粗、加副标题等），或者嵌套其他元素（比如操作按钮），用div作为容器会更灵活。

示例代码：

const myLibrary = ['Harry Potter','The God of Small Things'];
function Book() {
  for (let book of myLibrary) {
    const newDialog = document.createElement('dialog');
    newDialog.classList.add('new-dialog');
    
    // 创建div容器并添加文本
    const bookDiv = document.createElement('div');
    bookDiv.textContent = book;
    // 可以给div加类名方便样式控制
    bookDiv.classList.add('book-title');
    
    newDialog.appendChild(bookDiv);
    document.body.appendChild(newDialog);
    newDialog.showModal();
  }
}
Book();

另外，如果你想在一个对话框里展示所有书籍（而不是每个书单独一个对话框），可以调整代码逻辑，把所有书籍元素追加到同一个dialog中：

const myLibrary = ['Harry Potter','The God of Small Things'];
function Book() {
  const newDialog = document.createElement('dialog');
  newDialog.classList.add('new-dialog');
  
  myLibrary.forEach(book => {
    const bookDiv = document.createElement('div');
    bookDiv.textContent = book;
    bookDiv.classList.add('book-title');
    newDialog.appendChild(bookDiv);
  });
  
  document.body.appendChild(newDialog);
  newDialog.showModal();
}
Book();

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