Why innerHtml doesn't work

S

4

18

Why doesn't innerHtml work?

<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>

"started!" is showing, but the content of <p> doesn't get changed to foo as intended. Why?

Stringfellow answered 27/2, 2013 at 19:23 Comment(4)

@Cœur Making edits to a useless post from almost five years which has no effect other than bumping it back onto the home page seems pointless at best and actively harmful at worst. – Moldboard 18/10, 2017 at 4:29

@torazaburo some questions on frequent typo aren't useless. Related: meta.#270105 – Eu 18/10, 2017 at 4:36

Whether or or not the question is useless, editing it certainly is. And the question you quote doesn't qualify as a "simple" typographical error, while this does. – Moldboard 18/10, 2017 at 5:5

if the question wasn't taken down, it's not useless nor is editing it. – Hijacker 15/6, 2023 at 21:13

S

46

Casing matters, it's innerHTML not innerHtml. Try this:

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

Scrivings answered 27/2, 2013 at 19:24 Comment(1)

God bless you! I spent half a hour to find the answer – Charitacharitable 12/1, 2019 at 13:2

P

1

JavaScript is a Case Sensitive language so you should always check the case of the code you are writing.

Try using "innerHTML" in place of "innerHtml".

Also, it is a good practice to use Single Quotes(') instead of Double Quotes(") in JavaScript.

Pang answered 27/2, 2013 at 19:49 Comment(2)

Why not to use double quotes? – Suffocate 1/4, 2017 at 18:4

@les: check this page for reference - bytearcher.com/articles/… – Pang 4/4, 2017 at 19:18

O

0

If you're dealing with an API that returns XML then you likely don't have any innerHtml. Most browsers support outerHtml. Try this

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;
}

Ogrady answered 7/9, 2019 at 19:28 Comment(0)

T

-3

If you are using a mac try using

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

Teran answered 17/11, 2015 at 1:52 Comment(0)

Recommended topics

Hot tags