为什么 innerHtml 不起作用答案

【问题标题】：Why innerHtml doesn't work为什么 innerHtml 不起作用
【发布时间】：2013-02-13 18:15:25
【问题描述】：

为什么innerHtml 不起作用？

<script src="jquery.js"></script>
<script type="text/javascript">
function chat()
{
    alert ("started!");
    document.getElementById("test").innerHtml="foo";
}
</script>
<body id="body" onload="chat();">
<p id="test">
test..
</p>
</body>

“开始了！”正在显示，但 <p> 的内容并未按预期更改为 foo。为什么？

【问题讨论】：

@Cœur 对近五年来的无用帖子进行编辑，除了将其撞回主页之外没有任何效果，往好里说似乎毫无意义，往坏里说是有害的。
@torazaburo 一些关于频繁错字的问题并非没用。相关：meta.stackoverflow.com/questions/269605/…
无论问题是否无用，编辑它肯定是。您引用的问题不属于“简单”的印刷错误，但确实如此。

标签： javascript html innerhtml

【解决方案1】：

外壳很重要，innerHTML 不是 innerHtml。试试这个：

document.getElementById("test").innerHTML="foo";

【讨论】：

上帝保佑你！我花了半个小时才找到答案

【解决方案2】：

JavaScript 是一种区分大小写的语言，因此您应始终检查所编写代码的大小写。

尝试使用“innerHTML”代替“innerHtml”。

此外，在 JavaScript 中使用单引号(') 代替双引号(") 是一个好习惯。

【讨论】：

为什么不用双引号？
@les：查看此页面以供参考 - bytearcher.com/articles/…

【解决方案3】：

如果您正在处理返回 XML 的 API，那么您可能没有任何 innerHtml。大多数浏览器都支持outerHtml。试试这个

function getHTML(node){
    if(!node || !node.tagName) return '';
    if(node.outerHTML) return node.outerHTML;

    // polyfill:
    var wrapper = document.createElement('div');
    wrapper.appendChild(node.cloneNode(true));
    return wrapper.innerHTML;
}

【讨论】：

【解决方案4】：

如果您使用的是 mac，请尝试使用

document.getElementById("test").firstChild.nodeValue = "foo";

【讨论】：