Javascript 让getelementsbyclassname正常工作

在HTML页面中，我有两个标记，它们都带有类名测试。当我尝试执行下面的代码并使用GetElementsByCassName显示输出时，最后一个输出显示两次，而不是第一个输出后面跟着第二个输出

var callbackTester = function (callback) {
    var tryMe = "Are you ready, ";
    callback(tryMe);
};
var createMessageHandler = function (client) {
    this.client = client;
    this.result = function (foo) {
        foo(function (msg) {
            var elements = document.getElementsByClassName('test');
            for (var i = 0; i < elements.length; i++) {  
              elements[i].innerHTML = (msg + " " + this.client);
           };
        }.bind(this));
    }
};

(new createMessageHandler("John")).result(callbackTester);
(new createMessageHandler("Jason")).result(callbackTester);

查看了很多SO问题，实现看起来很相似。我错过了什么

试试这个：- JS:-

HTML:-

---

当前实现使用类名test更新所有元素。最后调用Jason时，它将使用Jason内容更新所有元素。

var callbackTester = function (callback) {
    var tryMe = "Are you ready, ";
    callback(tryMe);
};
var createMessageHandler = function (client) {
    this.client = client;
    this.result = function (foo) {
        foo(function (msg) {
            var el = document.createElement("div");
            el.className = "test";
            el.innerHTML = (msg + " " + this.client);
            document.getElementById("temp").appendChild(el);
        }.bind(this));
    }
};

(new createMessageHandler("John")).result(callbackTester);
(new createMessageHandler("Jason")).result(callbackTester);

<div id="temp"></div>