Question

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 complicates any “getindex”s I use.

Any help would be appreciated!

Answer 1

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\" />";