我正在尝试使用 Javascript 动态添加文本到对话框，但它不起作用

Question

const myLibrary = ['Harry Potter','The God of Small Things'];
function Book() {
  // the constructor...
  for (let book of myLibrary) {
    // Add book element to a dialog box. Create a dialog box first
    const newDialog = document.createElement('dialog');
    newDialog.classList.add = '.new-dialog';
    newDialog.textContent = book;
    document.body.appendChild(newDialog);
    console.log(book);
  }
}
Book();

在这里，我尝试将文本直接添加到对话框中。我假设我需要首先将文本添加到 div 中。然后将其附加到对话框中，这样可以吗？

提前致谢

基本上我正在尝试创建一个库，其中的书籍显示在 JavaScript 的对话框中。我是一名初学者，正在通过 odin 项目学习，所以请对我放轻松。

Answer 1

您缺少对话框元素上的

open

属性。此外，您可能希望将appendChild移出

for

循环，这样您就不会为每本书创建一个对话框。

const myLibrary = ['Harry Potter','The God of Small Things'];

function Book() {
  // the constructor...
  // Add book element to a dialog box. Create a dialog box first
  const newDialog = document.createElement('dialog');

  newDialog.classList.add('new-dialog');
  newDialog.setAttribute('open', '')
  
  // This can be as simple as this or you can add 
  // any valid HTML 
  newDialog.innerHTML = myLibrary.join('<br />')

  document.body.appendChild(newDialog); 
}

Book();