Как определить, нужен ли моему элементу innerHTML или значение

Question

Я использую JavaScript для запуска некоторых тестов AB на моем сайте. Я могу изменить текст в моем <button>с element.innerHTML = "Text that I want" но используя ту же стратегию, я не могу изменить текст в <input type="submit">"S.

И наоборот, я могу изменить значение кнопок отправки, используя element.value = "Text that I want", но не может изменить <button>текст таким образом.

Поэтому мой вопрос: как я могу узнать, какую функцию нужно использовать для конкретного элемента, чтобы я мог создать алгоритм, который обрабатывает каждый тип элемента?

Вкратце: как я знаю, использовать ли element.innerHTML или же element.value программно?

ПРИМЕЧАНИЕ: JQuery не допускается.

Пример. Вот некоторый код, который принимает имя класса в качестве входных данных и изменяет элемент по всей странице. Иногда <input> может иметь идентифицирующий класс, но иногда это может быть <div>, <button> или же <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

Если вы пытаетесь сделать это общим способом, вы можете сделать instanceof сверяем с классом интерфейса элемента ввода:

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

Answer 2

Так же, как вы знаете, как использовать этот элемент в HTML в первую очередь.

innerHTML устанавливает содержимое элемента; value устанавливает элемент value="" приписывать.