CODEWITHSUNDEEP
javascripthtmldom
nick2k3
nick2k3

Reputation: 1429

Add button to an HTML page using Javascript

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*/">&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>

Upvotes: 9

Views: 56393

Answers (1)

salgiza
salgiza

Reputation: 5900

The following code should get the 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).

Upvotes: 6

Related Questions