无法使用 document.createElement('div'); 创建 div 标签；在 JavaScript 中

编程问答 2022-05-27

问题描述

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8">
    <title> </title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" >
     </script>
  </head>
  <body>
    <input type="button" name="add" value="ADD DIV" onclick="addRow();"/>
    <p id="content">

    </p>
    

<script type="text/javascript">
      function addRow(){
       var div=document.createElement('div');
       div.className='row';
       console.log(document.getElementById('content'));
       console.log("CRETING DIV"+div);
       div.innerHTML = ` <input type="text" name="name" value="" />
                         <input type="text" name="value" value="" />
                        <label>
                          <input type="checkBox" name="check" value="1" /> Checked?
                        </label>
                         <input type="button" value="-" onclick="removeRow(this)" /> `;
                    console.log("after creting the  DIV "+div);
             document.getElementById('content').appendChild('div');
      }
     </script>
  </body>
</html>

问题：

当我使用 create 元素创建 DIV 标签时，它不会创建标签而是显示在控制台中 [object HTMLdivelement]

此外，appendChild('div') 不起作用。它说 RemoveDIVtagUsingJS.PHP:27 未捕获的类型错误：无法在“节点”上执行“appendChild”：参数 1 不是“节点”类型

我不知道为什么我的 document.createElement('div'); 不起作用。该怎么办？

解决方法

去掉函数调用appendChild中的引号：

document.getElementById('content').appendChild(div);

应该可以。