I'm trying to modify the HTML markup of a page in order to add some button using JavaScript.
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.
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.
The HTML page contains a <FORM> with a table in it.
After some rows and cells there is a cell which contains 3 input buttons:
<input type=submit name=submit value=Set Ships>
<input type=button name=sel value=Select all onclick=alert('Not Allowed.');>
<input type=button name=desel value=Deselect all onclick=alert('Not Alloowed.');>
I would like my JavaScript code to place a fourth button just after the desel button.
This is the code I use to add the button:
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);
}
This code obviously places the button straight at the end of my document, just after the form (named flotta).
I realized I cannot use the function getElementById because the <td> tag just before the buttons does not have an id associated.
Thus I ask if anyone can point me to a solution to add the fourth button into the right place.
<html>
<head>
<title>fee foo</title>
. . . head code
</head>
<body >
<div id=Layer name=Layer /*other attributes*/></div>
<table /*table attributes*/>
. . . table content
</table>
<form id=flotta name=flotta method=post action=home.php?sel=gestioneflotta>
<table /*table attributes*/>
<tbody>
<tr><td>
<table /* attributes*/>
<tbody><tr>
<td /* attributes*/></td>
<td /* attributes*/></td>
<td /* attributes*/></td>
</tr>
<tr>
<td /* attributes*/> </td>
<td bgcolor=ffffff background=bg/pergamena.jpg align=center>
<input type=submit name=submit value=Set Ships>
<input type=button name=sel value=Select all onclick=alert('Not Allowed.');>
<input type=button name=desel value=Deselect all onclick=alert('Not Alloowed.');> </td>
<td background=bg/menu_d.gif> </td>
</tr>
<tr>
<td /* attributes*/ width=11 height=11></td>
<td /* attributes*/></td>
<td /* attributes*/></td>
</tr>
</tbody>
</table>
</td></tr>
<tr>
. . . another row
</tr>
</tbody>
</table>
</form>
<table border=0 cellspacing=0 cellpadding=0 align=center width=510>
. . . another table
</table>
<script type=text/javascript>
some script
</script>
</body>
</html>
