insertBeforeがフォームで機能しなくなるdivを追加すると

Question

私は自分が望む数の著者を追加できる動的フォームを作成しました。関数add_author（）

<form action="uploadtodb.php" target="dummyframe" method="post" name="myform"> 
      <p> 
      Authors last name:  <input type="text" name="authorln[]" size="32" /> 
      Authors first names: <input type="text" name="authorfns[]" size="32" /> 
      </p> 
      <p id="add_author_button"> 
      <button type="button" onclick="add_author()">Add new author</button> 
      <button type="button" onclick="remove_author()">Remove last author</button> 
      </p> 
</form> 

それは完璧に動作しますが、その後、私はそれにいくつかのスタイルを追加したいパラ

document.myform.insertBefore(para, document.getElementById("add_author_button")); 

として以下に示さあるmyForm新しい段落を追加します。だからdivを追加しました：

<form action="uploadtodb.php" target="dummyframe" method="post" name="myform"> 
     <div id="authors"> 
      <p> 
      Authors last name:  <input type="text" name="authorln[]" size="32" /> 
      Authors first names: <input type="text" name="authorfns[]" size="32" /> 
      </p> 
      <p id="add_author_button"> 
      <button type="button" onclick="add_author()">Add new author</button> 
      <button type="button" onclick="remove_author()">Remove last author</button> 
      </p> 
     </div> 
</form> 

このような変更ボタンを押しても反応しません。

Answer 1

フォームにはdocument.<form name>を使用できますが、作成者divのような任意の要素に対しては使用できません。なぜgetElementById()を使用しないのですか？

document.getElementById("authors").insertBefore(para, document.getElementById("add_author_button"));