Я пытаюсь изменить HTML-разметку страницы, чтобы добавить какую-нибудь кнопку с помощью JavaScript.
Ниже вы можете найти «фрагмент» (довольно длинный, извиняюсь, но мне очень нужно, чтобы вы узнали структуру страницы) страницы, которую я пытаюсь изменить.
Мой код JavaScript вставляется расширением браузера (я могу успешно добавить JavaScript на страницу и запустить его), и единственная операция, которую он должен сделать, это добавить кнопку в правильное положение.
HTML-страница содержит <FORM> с таблицей в ней.
После нескольких строк и ячеек есть ячейка, которая содержит 3 кнопки ввода:
<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.');">
Я бы хотел, чтобы мой код JavaScript поместил четвертую кнопку сразу после кнопки desel.
Вот код, который я использую для добавления кнопки:
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);
}
Этот код, очевидно, размещает кнопку прямо в конце моего документа, сразу после формы (с именем flotta).
Я понял, что не могу использовать функцию getElementById, потому что тег <td> непосредственно перед кнопками не связан с id.
Таким образом, я спрашиваю, может ли кто-нибудь указать мне решение добавить четвертую кнопку в нужное место.
<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>