如何判断我的元素需要使用innerHTML还是value属性？

Question

我正在使用JavaScript在我的网站上进行一些AB测试。我可以通过element.innerHTML =“想要的文本”更改<button>中的文本，但是使用相同的策略我无法更改<input type =“submit”>中的文本。

反过来，我可以使用element.value =“想要的文本”更改提交按钮的值，但无法以此方式更改<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;
            }
        }
    };

- Trevor Hutto

Answer 1

如果您想以通用方式实现它，可以对输入元素的接口类进行instanceof检查：

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

- Emissary

---

很棒的方法。你把它提升到了下一个级别。 - roshan

Answer 2

你可以像使用HTML元素一样来使用它。

innerHTML设置元素的内容；value设置元素的value=""属性。

- SLaks

---

我该如何使用同一段代码更改“提交”按钮的“value”和“button”的“innerHTML”？ - Trevor Hutto

只有少数元素使用value，因此您可以制作一个列表，并为它们设置一个例外。 - MightyPork

@MightyPork 好的，我以为可能有更优雅的方式。 - Trevor Hutto