更改嵌套 div 标签中元素的 innerHTML答案

【问题标题】：Changing the innerHTML of elements in a nested div tag更改嵌套 div 标签中元素的 innerHTML
【发布时间】：2010-05-06 01:17:39
【问题描述】：

很明显我是个白痴 - 我的 JS 在这段代码上方有一个错误 - 很抱歉打扰 - 以下所有内容在一种或另一种形式中都是正确的..（我也在选择一个在 IE 中有效的是正确答案）.. 感谢您的所有帮助！

-- 仅代表代码--我需要知道如何更改tablerow的innerhtml--

<html>
<head>
<script> //full javascript declaration - function call after page loads..
function ()
{
document.getElementById('tr1').innerHTML='<td>Test</td>'; // does not work..
document.getElementByTagNames('tr')[0].innerHTML='<td>Test</td>'; // does not work..
document.getElementById('div2').getElementsByTagNames('tr')[0].innerHTML='<td>Test</td>'; //does not work..
document.getElementById('div1').div2.tr1.innerHTML='<td>Test</td>'; //nope
}
</script>
</head>
<body>
<div id='div1'>
    <div id='div2'>
        <table>
            <tr id='tr1'></tr>
        </table>
    </div>
</div>
</body>
</html>

感谢您的帮助

让我澄清一下。我有 400 行 HTML/JS/Jquery 代码是动态生成的，所以我将简化为有问题的部分

在body加载时调用这个函数：

function loadinitialData()
{
$('#tabs').tabs();
document.getElementById('tr0').innerHTML = '<td>John Doe</td><td>3.988000</td><td>Candidate Doe</td>';
document.getElementById('tr1').innerHTML = '<td>Jane Doe</td><td>5.796000</td><td>Candidate Doe</td>';
}

这是在正文中：

<div id="tabs" class="ui-corner-top"> 
            <ul> 
                <li><a href="#tabs-1">Some Idiots</a></li> 
                <li><a href="#tabs-2">Other Idiots</a></li> 
            </ul>
            <div id="tabs-1">
            <table width="590px" cellpadding="4px" rules="groups" frame="void" bordercolor="white">
            <tr><td>Name</td><td>Time Taken</td><td>Something</td></tr>
            <tbody>
            <tr style='font-size:12px' id='tr0'></tr><tr style='font-size:12px' id='tr1'></tr></tbody></table></div>
            <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> 
</div>

PS：使用 jquery 选项卡，但这不是问题..

根据@Gero，我尝试了以下方法：将所有加载更改为：

document.getElementById('tablet10').rows[0].cells[0].innerHTML = 'John Doe';
document.getElementById('tablet10').rows[0].cells[1].innerHTML ='3.988000';
document.getElementById('tablet10').rows[0].cells[2].innerHTML ='Candidate Doe';

Blah Blah - 所有其他的......

在体内

<div id="tabs-1"> 
            <table id="tablet10" width="590px" cellpadding="4px" rules="groups" frame="void" bordercolor="white"> 
            <tr><td>Name</td><td>Time Taken</td><td>Something</td></tr> 
            <tbody> 
            <tr style='font-size:12px'><td></td><td></td><td></td></tr><tr style='font-size:12px'><td></td><td></td><td></td></tr></tbody></table></div>

每个@plodder 加载：

document.getElementById('tr0').insertCell(0).innerHTML = 'John Doe';
document.getElementById('tr0').insertCell(1).innerHTML ='3.988000';
document.getElementById('tr0').insertCell(2).innerHTML ='Candidate Doe';

其余的等等等等……

和身体：

<div id="tabs-1"> 
            <table width="590px" cellpadding="4px" rules="groups" frame="void" bordercolor="white"> 
            <tr><td>Name</td><td>Time Taken</td><td>Something</td></tr> 
            <tbody> 
            <tr style='font-size:12px' id='tr0'></tr><tr style='font-size:12px' id='tr1'></tr></tbody></table></div>

【问题讨论】：

请提供您用于表格的html。
您问题中的代码没有问题。请向我们展示您的真实代码。

标签： javascript dom html nested innerhtml

【解决方案1】：

代码在 IE 中会失败，因为 TR.innerHTML 在 IE 中不可写

您应该对表格行使用 DOM API

document.getElementById('tr1').insertCell(myCell);

【讨论】：

试过 - 见上文 - 不起作用..还有其他想法吗？谢谢！
尝试 var myCell = document.createElement('TD'); myCell.innerHTML = "John Doe"; document.getElementById('tr1').insertCell(myCell);

【解决方案2】：

在这里您可以看到一个工作代码的示例。 http://www.w3schools.com/js/tryit.asp?filename=try_dom_tablerow_cells

【讨论】：

【解决方案3】：

“该属性对于除以下对象外的所有对象都是读/写的，对于这些对象，它是只读的：COL、COLGROUP、FRAMESET、HEAD、HTML、STYLE、TABLE、TBODY、TFOOT、THEAD、TITLE、TR。”

“可以使用 DHTML 表达式代替前面的值。”

http://msdn.microsoft.com/en-us/library/ms533897.aspx

【讨论】：

由于某种原因，内部 div 也不起作用。澄清：我正在成功更改文档其他部分的 innerhtml，但 div 没有嵌套。不适用于 Chrome、FF 和 IE..