Question

<!doctype html>
<html>
   <head>
      <script>

          function buildChat(name) {
               var chat = document.getElementById('CreateChat');
               var group = document.createElement('div');
               var title = document.createElement('p');
               title.className = 'title';
               title.innerHTML = name;
               title.align = 'center';
               group.appendChild(title);
               chat.appendChild(group);
          }
          buildChat('name');
      </script>
   </head>
  <body>
       <div id='CreateChat'></div>

  </body>
</html>

CreateChat是正文中div标签的id。但是在控制台中它说聊天是空的，并且没有创建标签。谁能告诉我为什么？

Answer 1

在加载CreateChat div之前，正在调用buildChat（）。将脚本块向下移动到关闭正文标记的正上方，它应该可以正常工作。

Answer 2

您应该将脚本直接放在结束</body>标记或/和document.onload = function（）{}之上。在您调用函数时，该元素不存在。

<!doctype html>
<html>
<head>

</head>

<body>
   <div id='CreateChat'></div>

<script>

   function buildChat(name) {
   var chat = document.getElementById('CreateChat');
   var group = document.createElement('div');
   var title = document.createElement('p');
   title.className = 'title';
   title.innerHTML = name;
   title.align = 'center';
   group.appendChild(title);
   chat.appendChild(group);
   }
   buildChat('name');
 </script>
 </body>
 </html>

Answer 3

除了您的script标记位于html div元素上方之外，您还需要将“group”附加到DOM：

<!DOCTYPE html />
<html>
   <head>

   </head>
  <body>
       <div id='CreateChat'></div>
      <script>

          function buildChat(name) {
               var chat = document.getElementById('CreateChat');
               var group = document.createElement('div');
               var title = document.createElement('p');
               title.className = 'title';
               title.innerHTML = "<p>" + name + "</p>";
               title.align = 'center';
               document.body.appendChild(group);
               //^ Need to append group
               group.appendChild(title);
               chat.appendChild(group);
          }
          buildChat('name');
      </script>
  </body>
</html>

为什么控制台显示聊天为空？

3 个答案: