title: Add button to an HTML page using Javascript
body: <p>I'm trying to modify the HTML markup of a page in order to add some button using JavaScript.</p>
  
  <p>Below you can find a "snippet" (quite long, I apologize, but I really need you to get the structure of the page) of the page I am trying to modify.</p>
  
  <p>My JavaScript code is inserted by a browser extension (I can successfully add the JavaScript to the page and make it run) and the only operation it should do is to add a button into the right position.</p>
  
  <p>The HTML page contains a <code>&lt;FORM&gt;</code> with a table in it.<br>
  After some rows and cells there is a cell which contains 3 input buttons:  </p>
  
  <pre><code>&lt;input type="submit" name="submit" value="Set Ships"&gt;
  &lt;input type="button" name="sel" value="Select all" onclick="alert('Not Allowed.');"&gt;
  &lt;input type="button" name="desel" value="Deselect all" onclick="alert('Not Alloowed.');"&gt;
  </code></pre>
  
  <p>I would like my JavaScript code to place a fourth button just after the <code>desel</code> button.
  This is the code I use to add the button:</p>
  
  <pre><code>function add() {
      var element = document.createElement("input");
      element.setAttribute("type", "button");
      element.setAttribute("value", "invert");
      element.setAttribute("name", "button3");
      element.setAttribute("onclick", "foo()");
      document.flotta.appendChild(element);
  }
  </code></pre>
  
  <p>This code obviously places the button straight at the end of my document, just after the form (named <code>flotta</code>).</p>
  
  <p>I realized I cannot use the function <code>getElementById</code> because the <code>&lt;td&gt;</code> tag just before the buttons does not have an <code>id</code> associated.</p>
  
  <p>Thus I ask if anyone can point me to a solution to add the fourth button into the right place.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;fee foo&lt;/title&gt;  
          . . . head code
      &lt;/head&gt;
  
  &lt;body &gt;
      &lt;div id="Layer" name="Layer" /*other attributes*/"&gt;&lt;/div&gt;
      &lt;table /*table attributes*/&gt;
      . . . table content
      &lt;/table&gt;
  &lt;form id="flotta" name="flotta" method="post" action="home.php?sel=gestioneflotta"&gt;
      &lt;table /*table attributes*/&gt;
          &lt;tbody&gt;
              &lt;tr&gt;&lt;td&gt;
              &lt;table /* attributes*/&gt;
                  &lt;tbody&gt;&lt;tr&gt;
                  &lt;td /* attributes*/&gt;&lt;/td&gt;
                  &lt;td /* attributes*/&gt;&lt;/td&gt;
                  &lt;td /* attributes*/&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                  &lt;td /* attributes*/"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td bgcolor="ffffff" background="bg/pergamena.jpg" align="center"&gt;
                  &lt;input type="submit" name="submit" value="Set Ships"&gt;
                  &lt;input type="button" name="sel" value="Select all" onclick="alert('Not Allowed.');"&gt;
                  &lt;input type="button" name="desel" value="Deselect all" onclick="alert('Not Alloowed.');"&gt;   &lt;/td&gt;
                  &lt;td background="bg/menu_d.gif"&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                  &lt;td /* attributes*/" width="11" height="11"&gt;&lt;/td&gt;
                  &lt;td /* attributes*/&gt;&lt;/td&gt;
                  &lt;td /* attributes*/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
              . . . another row
              &lt;/tr&gt;
  
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  &lt;table border="0" cellspacing="0" cellpadding="0" align=center  width=510&gt;
      . . . another table
  &lt;/table&gt;
  
  &lt;script type="text/javascript"&gt;
  some script
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>