Question

我试图迭代地更改Id的innerHTML，例如：

document.getElementById("test").innerHTML += "<br />"

和

document.getElementById("test").innerHTML += "<table>" + blahblah + "</table>"

但我发现它并不一定按顺序放置我的标签。

当然，这个方法很糟糕，我只是改变了所有内容以继续添加一个字符串，我最后将其分配给Id的innerHTML。

我的问题是：

innerHTML究竟对我正在插入的标签做了什么，它是确定性的，是否具有特定功能？

Answer 1

根据我的经验，大多数时候浏览器会在将HTML ¹注入DOM之前尝试更正HTML ¹。如果您想以这种方式构建<ul>：

someElement.innerHTML += '<ul>';
someElement.innerHTML += '<li>some li</li>';
someElement.innerHTML += '<li>some other li</li>';
someElement.innerHTML += '</ul>';

例如，Chrome会导致：

<ul></ul>
 <li>some li</li>
 <li>some other li</li>
<ul></ul>

因此，innerHTML可以提供不可预测的结果，因为每次使用它时，浏览器都会更正HTML（并且浏览器的使用方式也不同）。对于表/表元素尤其如此（尤其在IE中更是如此（顺便说一下，MS发明了innerHTML;））。如果你希望你的html完全按照你的意图，坚持使用DOM方法（createElement / appendChild等），或者首先建立一个完整的字符串要使用innerHTML插入的元素，然后插入它，换句话说，不要将innerHTML与包含不完整HTML的字符串一起使用。

要完成，我引用PPK's quirksmode：

如果您删除元素 IE中的innerHTML，其内容是擦拭，只有元素本身（即打开和关闭标签）依然存在。如果要删除节点你可能想重新插入一个以后的时间，使用DOM等方法 removeChild之（）

¹更具技术性：我认为每个浏览器都应用自己的 HTML fragment parsing algorithm 。

Answer 2

InnerHTML没有做任何事情，但浏览器可以自由地改变它喜欢的东西。如果您在Firefox中打开一个页面并随之打开Firebug，您可以看到这种情况。当您查看HTML时，您可能会发现某些元素不再存在。

对于新手来说，Firefox最令人惊讶的行动是将所有HTML更改为看似XHTML的内容。

关于你的方法，我觉得它根本不好。事实上，我认为这很酷。那谢谢啦！

并为此提出建议： - ）

Answer 3

虽然innerHTML 不是是w3c DOM的一部分，但所有浏览器都支持它。最初它只是将字符串 as-it-is 附加到您的元素。但是，所有主流浏览器都会修改您的字符串并使字符串成为有效的html标记。这是浏览器特定的，并且不在任何官方标准中明确定义。我喜欢Mozilla解释innerHTML工作方式的方式。

Answer 4

我最近遇到过类似的问题。由于几乎没有任何有用的文档，我必须通过经验学习。到此为止。

一旦修改完成，浏览器似乎正在解析innerHTML。通过此类解析，任何无效的HTML代码段都将被拒绝/添加到有效代码段中并生成！

故事的道德：每当您修改innerHTML时，请确保您插入的HTML有效。因此，...innerHTML += "<table> ... </table>" 应正常工作，但...innerHTML += "<table>"; ... .innerHTML += "<\table>" 可能会导致意外行为。

这种情况正好发生，因为在后一种情况下，只要插入<table>，浏览器就会解析字符串并添加一个完整的节点（从而完成不完整的代码）。因此，您稍后添加的任何内容都将显示为表节点的兄弟节点，而不是您最初预期的子节点。

Answer 5

在我看来，您不应将文本放在doucumet.getElementByID（“ Name”）。innerHTML中我认为您应该只输入html。使用签名〜〜if you put in innerHTML something you can get some informations from API. Like me. In script tag. I used console.log and document.getElementById console.log('ID: ' + profile.getId()); console.log('Name: ' + profile.getName()); document.getElementById("Name").innerHTML = +profile.getName()+`

innerHTML的内部运作

5 个答案: