How to tell whether my element needs innerHTML or value

Question

I am using JavaScript to run some AB tests on my site. I am able to change the text in my <button> 's with element.innerHTML = "Text that I want" but using that same strategy I cannot change the text in <input type="submit"> 's.

Inversely, I can change the value of submit buttons using element.value = "Text that I want" , but cannot change a <button> 's text in that way.

So my question is, how can I know which function needs to be used on a specific element so that I can create an algorithm that handles every type of element?

In short: How do I know whether to use element.innerHTML or element.value programmatically?

NOTE: jQuery is not allowed.

Example - Here is some code that takes a class name as input and changes the element throughout the page. Sometimes an <input> may have the identifying class, but sometimes it may be a <div> , <button> or <p> .

var execute = function(experimentName, variation){
        var elements = document.getElementsByClassName(experimentName);
        for (var j = 0; j < elements.length; j++) {
            if (typeof(variation) == "function")
            {
                variation.call(elements[j]);
            }
            else
            {
                elements[j].value = variation;
                //elements[j].innerHTML = variation;
            }
        }
    };

Answer 1

If you are trying to do it in a generic way you could make an instanceof check against the input element's interface class :

if( element instanceof HTMLInputElement ){
    element.value = "foo";
} else {
    element.innerHTML = "foo";
}

Answer 2

The same way you know how to use that element in HTML in the first place.

innerHTML sets the element's contents; value sets the element's value="" attribute.