javascript - 无法更改表格单元格的 innerHTML

Question

我在尝试使用 .innerHTML 更改表格单元格内的文本时遇到了问题。当我创建的其中一个单选按钮被选中时，我想将单元格中的纯文本更改为链接。相关代码如下:

HTML:

 ...<td id="header1" style="width: 80px; text-align:center">Column 1</th>... 


 <div id="testButtons">
        <input type="radio" name="on/off" onclick="showLinks()" value="off" id="off" checked="">
            <label for="off">Function Off</label> 
        <input type="radio" name="on/off" onclick="showLinks()" value="on" id="on">
            <label for="on">Function On</label>
 </div>

和 Javascript:

function showLinks(){ 
if(document.getElementById("on").checked){
    document.getElementById("header1").innerHTML("<a id='headerLink1' href='#' onclick='selectColumn()'>Column 1</a>");
}

当我测试它时，我得到这个错误:Uncaught TypeError: Property 'innerHTML' of object #HTMLTableCellElement is not a function。

我不知道为什么，因为看起来这应该有效，至少根据 MSDN (“但是，要更改特定单元格的内容，您可以使用 innerHTML。”)。

任何帮助将不胜感激， 谢谢

Answer 1

innerHTML 不是一个方法，而是一个 DOM 属性(官方称为 DOMString)。你应该这样做:

document.getElementById("header1").innerHTML = "<a id='headerLink1' href='#' onclick='selectColumn()'>Column 1</a>";