使用Java脚本将按钮添加到HTML页面

如何解决使用Java脚本将按钮添加到HTML页面

| 我正在尝试修改页面的HTML标记，以便使用JavaScript添加一些按钮。在下面，您可以找到我要修改的页面的\“ snippet \”（很长，我很抱歉，但是我真的需要您获取页面的结构）。我的JavaScript代码是由浏览器扩展插入的（我可以成功地将JavaScript添加到页面并使其运行），并且它唯一要做的操作就是将按钮添加到正确的位置。 HTML页面包含一个带有表的“ 0”。在某些行和单元格之后，有一个包含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*/\">&nbsp;</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\">&nbsp;</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>

解决方法

以下代码应获取td：

var td = document.getElementsByName(\'desel\')[0].parentNode;

基本上，它获取所有名称为\'desel \'的字段/按钮，并假设只有一个，则获取第一个元素的父元素（应该是包含按钮的td）。

使用Java脚本将按钮添加到HTML页面

如何解决使用Java脚本将按钮添加到HTML页面

解决方法

相关推荐