1

我编写用于操作 DOM 对象的函数。此函数必须找到具有特定 ID 的元素并将新的子元素添加到具有特定 ID 的元素：

<html>
<head>
    <title> Text </title>
     <meta charset="utf-8">
</head>
<body id="tbody">
  <script>
    function add(){
       el = document.getElementById("testform");
       var nf=document.createElement("input");
       nf.type="text";
       el.appendChild(nf);
    }
  </script>

   <p>
     <form id="testform">
       <button onclick="add();"> create</button>
      </form>
   </p>


</body>
</html>

文本输入元素不在页面上创建，但相同的代码被放置在脚本标签中，没有功能工作

4

2 回答 2

7

您正在重新加载页面，并且需要在单击按钮以停止提交表单时返回 false ：

<html>
    <head>
        <title> Text </title>
        <meta charset="utf-8">
    </head>
    <body id="tbody">
        <script type="text/javascript">
            function add(){
                el = document.getElementById("testform");
                var nf=document.createElement("input");
                nf.type="text";
                el.appendChild(nf);
            }
       </script>
       <p>
       <form id="testform">
           <button onclick="add();return false;"> create</button>
       </form>
       </p>
   </body>
</html>​

此外，在段落中粘贴表格似乎没有必要？

小提琴

于 2012-12-14T10:41:10.563 回答
1

由于按钮元素类型的默认操作是提交，因此每次单击时都会提交。您可以执行 return false 或创建标签标签而不是按钮，例如：

<html>
    <head>
    <title> Text </title>
     <meta charset="utf-8">
    </head>
    <body id="tbody">
    <script>
    function add(){
        el = document.getElementById("testform");
        var nf=document.createElement("input");
        nf.type="text";
        el.appendChild(nf);
    }
    </script>

   <p>
   <form id="testform">
   <label onclick="add();"> create</label>
   </form>
   </p>


   </body>
   </html>

演示

于 2012-12-14T10:48:37.683 回答