Firebaseから受信した値をcreateElement()で生成した要素に入れるとエラーが出る

現在Firebaseを使ってチャットアプリを作っています。
ユーザーが投稿した文を<div>要素に追加して表示したいのですが上手くいきません。

流れとして、
①投稿ボタンを押す

②投稿した文をオブジェクト変数内のプロパティ、textとして送信、追加

③createElement（）で<div>要素を生成

④③で生成した<div>要素の中にデータベースから受信したtextプロパティをappendChild()で追加しようとするも
Exception was thrown by user callback. TypeError: document.getElementsByClassName(...).append is not a function
とエラーが出ます。

コードは以下になります。

          firebase
            .database()
            // .ref("users/" + userId)
            .ref("chat/")
            .on("child_added", function(data) {
              console.log("test", data);
              const v = data.val();
              console.log(v);
              console.log(v.text);
              if (userId == v.uid) {
                var userDiv = document.createElement("div");
                var userA = document.createElement("a");                
                var userText = v.text; 
                document.getElementById('output').appendChild(userDiv);
                document.getElementsByClassName('userDiv').append(v.text);