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

ボタン要素タイプのデフォルトアクションは送信であるため、クリックするたびに送信されます。次のようなボタンの代わりに、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 に答える