.innerHTML is not a function

Question

Its so plain simple, I can not comprehend, what is the issue? All DOMs are created before I pick them, used either a document.getElementsByClass or just the dom object created itself, not working... I wonder where did I do wrong?

    var wrapperDom = document.createElement('div');
    wrapperDom.className = 'sticky-state-wrapper';

    var containerDom = document.createElement('div');
    containerDom.className = 'sticky-state-container';

    var targetDom = document.createElement('div');
    targetDom.className = 'sticky-state-target';
    targetDom.style.height='50px';
        targetDom.innerHTML("My Sticky Component");

https://jsfiddle.net/adamchenwei/cv3mpL4k/1/

Solution 1

It's not a function. It's a property. Try this instead:

targetDom.innerHTML = "My Sticky Component";

Solution 2

That's because, like elclanrs said, innerHTML is not a function.

Use it like this: targetDom.innerHTML = "My Sticky Component";

Comments

[elclanrs]

Well, innerHTML is not a function... developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

[avrahamcool]

should be targetDom.innerHTML = "My Sticky Component";

[Dr. Aaron Dishno]

try targetDom.innerHTML="My Sticky Component";