使用 Javascript 将按钮添加到 HTML 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6123136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add button to an HTML page using Javascript
提问by nick2k3
I'm trying to modify the HTML markup of a page in order to add some button using JavaScript.
我正在尝试修改页面的 HTML 标记，以便使用 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.
我的 JavaScript 代码是由浏览器扩展程序插入的（我可以成功地将 JavaScript 添加到页面并使其运行），它应该做的唯一操作是在正确的位置添加一个按钮。
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:
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.');">
I would like my JavaScript code to place a fourth button just after the deselbutton.
This is the code I use to add the button:
我希望我的 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);
}
This code obviously places the button straight at the end of my document, just after the form (named flotta).
这段代码显然将按钮直接放在我的文档末尾，就在表单（名为flotta）之后。
I realized I cannot use the function getElementByIdbecause the <td>tag just before the buttons does not have an idassociated.
我意识到我无法使用该功能，getElementById因为<td>按钮之前的标签没有id关联。
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>
采纳答案by salgiza
The following code should get the td:
下面的代码应该得到 td：
var td = document.getElementsByName('desel')[0].parentNode;
Basically, it gets all the fields/buttons with the name 'desel' and, assuming there's only one, gets the parent of the first element (which should be the td that contains the buttons).
基本上，它获取名为“desel”的所有字段/按钮，并且假设只有一个，则获取第一个元素的父元素（应该是包含按钮的 td）。
