I am attempting to insert an input button into an HTML table using .innerHTML in the associated Javascript function.

Whenever I use the same JS, but replace the "select" with other HTML, it works perfectly fine. It is only < input type="button" /> and < button > that do not work.

The problem appears in at least IE, Firefox, and Chrome. Chrome returns an "Unexpected Identifier" error.

The abbreviated code (NOT the original):

function newrow() {
    table = document.getElementById("Table");
    row = table.insertRow(1);
    cell = row.insertCell(0);
    cell.innerHTML = "<input id="Button" type="button" value="ClickHere" />";
};

I have tried replacing the HTML with formatted text ("< b > Text < / b >") and links, and both display correctly.

I have also created the object outside of the script, and this does work, but seems unnecessary:

<input id="Button" type="button" value="ClickHere" />

<script type="text/javascript">

function newrow() {
    table = document.getElementById("Table");
    button = document.getElementById("Button");
    row = table.insertRow(1);
    cell = row.insertCell(0);
    cell.innerHTML = button;
};

This works, but is ungainly and plicates any "getindex"s I use.

Any help would be appreciated!

I am attempting to insert an input button into an HTML table using .innerHTML in the associated Javascript function.

Whenever I use the same JS, but replace the "select" with other HTML, it works perfectly fine. It is only < input type="button" /> and < button > that do not work.

The problem appears in at least IE, Firefox, and Chrome. Chrome returns an "Unexpected Identifier" error.

The abbreviated code (NOT the original):

function newrow() {
    table = document.getElementById("Table");
    row = table.insertRow(1);
    cell = row.insertCell(0);
    cell.innerHTML = "<input id="Button" type="button" value="ClickHere" />";
};

I have tried replacing the HTML with formatted text ("< b > Text < / b >") and links, and both display correctly.

I have also created the object outside of the script, and this does work, but seems unnecessary:

<input id="Button" type="button" value="ClickHere" />

<script type="text/javascript">

function newrow() {
    table = document.getElementById("Table");
    button = document.getElementById("Button");
    row = table.insertRow(1);
    cell = row.insertCell(0);
    cell.innerHTML = button;
};

This works, but is ungainly and plicates any "getindex"s I use.

Any help would be appreciated!

• javascript
• html
• html-table
• innerhtml

• 1 A select with a type="button"? – epascarello Commented Sep 27, 2012 at 20:10
• 2 Are you aware of the double quotes issue in "<select id="Button" type="button"...? – Michal Klouda Commented Sep 27, 2012 at 20:10
• Not counting the major syntax error in your posted code cell.innerHTML = "<select id="Button" type="button" value="ClickHere" />";, there is no 'type="select"` for buttons. – Jeremy J Starcher Commented Sep 27, 2012 at 20:10

2 Answers 2

An "Unexpected Identifier" error would be triggered by this line:

cell.innerHTML = "<input id="Button" type="button" value="ClickHere" />";

The problem is your quotes. The JavaScript interpreter is getting confused with the quotes used to represent strings in JavaScript and the quotes used inside HTML. You need to either escape the quotes within the string, or use single quotes for one of the purposes.

Single quotes would work:

cell.innerHTML = '<input id="Button" type="button" value="ClickHere" />';

Alternatively, escaping the quotes would work:

cell.innerHTML = "<input id=\"Button\" type=\"button\" value=\"ClickHere\" />";

I think you are looking for <input type="button" /> not select maybe? The select element is for dropdown menus.