如何判断我的元素是否需要 innerHTML 或值

Question

我正在使用 JavaScript 到运行我网站上的一些 AB 测试。我可以使用 element.innerHTML = "Text that I want" 更改 <button> 中的文本，但使用相同的策略我无法更改 <input type="submit"> 中的文本。

相反，我可以使用 element.value = "Text that I want" 更改提交按钮的值，但不能以这种方式更改 <button> 的文本。

所以我的问题是，我如何知道需要在特定元素上使用哪个函数，以便我可以创建处理每种元素类型的算法？

简而言之：我如何知道以编程方式使用 element.innerHTML 还是 element.value？

注意： jQuery 是不允许的。

示例 - 下面是一些代码，将 class 名称作为输入并更改整个页面的元素。有时 <input> 可能具有标识 class，但有时它可能是 <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

与您首先知道如何在 HTML 中使用该元素的方式相同。

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

Answer 2

如果您尝试以通用方式执行此操作，您可以对输入元素的 interface class 进行 instanceof 检查：

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

如何判断我的元素是否需要 innerHTML 或值

How to tell whether my element needs innerHTML or value

html

javascript

innerhtml

abtest