insertBefore stoppt in der Form arbeiten Wenn ich div

Question

hinzufügen, habe ich dynamische Form erstellt, in der ich so viele Autoren hinzufügen kann, wie ich möchte.

<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> 

wo Funktion add_author() fügt zu myform neue Ziffer bezeichnet unten als para

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

Es funktioniert perfekt, aber dann wollte ich es einige Stile hinzuzufügen. Also habe ich 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> 

Nach einer solchen Änderung Tasten reagieren nicht.

Answer 1

Obwohl Sie document.<form name> für Formulare verwenden können, können Sie dies nicht für beliebige Elemente wie Ihre Autoren div tun. Warum nicht einfach getElementById() verwenden?

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