javascript - 单例 javascript appendChild

Question

我想在DIV标签中插入一个DIV标签；

我有1个主DIV标签，我需要在主DIV标签中插入很多DIV标签；

我想开发一个CHAT，所以最新的DIV标签，必须在所有旧的DIV标签之前，加上玩家发送的文本；

我使用了单例 javascript 模式；

所有新的 DIV 标签，必须插入到 ID 为 chat_messages 的 DIV 标签中

我尝试使用此 elem[0].appendChild(div); 但它不起作用；

使用elem[0].appendChild(div);时插入新的DIV标签失败

使用 elem[0].appendChild(div); 它插入 DIV 标签，但它始终是最后一个 div；

这就是我在控制台中测试功能的方式:Filcai.outBound('message');

<div id="chat" style="padding:10px 10px;background-color:#eeeeee;margin:10px 10px;">
    <div>CHAT</div>
    <div>
        <input id="chat_message" type="text" name="chat_message" />
    </div>
    <div id="chat_messages">
        <div>
            message 2
        </div>
        <div>
            message 1
        </div>
    </div>
</div>
<script type="text/javascript">
    var FilcaiClass = FilcaiClass ? FilcaiClass : function() {

        var f = function()
        {
            if (1 == 1) {
                console.log('1==1');
            }
        };
        function div1(displayTarget, div_id)
        {
            console.log('div1');
        }
        ;
        function createElementScript(src)
        {
            var script = document.createElement("script");
            script.type = 'text/javascript';
            script.src = src;
            //console.log("SRC: "+src);
            var header = document.getElementsByTagName("head");
            header[0].appendChild(script);
        }
        ;
        function create_message()
        {
            var div = document.createElement('div');
            div.innerText = 1;//document.getElementById('chat_message').value;
            var elem = document.getElementById('chat_messages');
            elem[0].appendChild(div);
        }
        ;
        f.prototype = {
            init: function() {
                console.log('init');
            },
            inBound: function(action, data)
            {
                try {
                    if (parseInt(data.code) < 0) {
                        alert('Internal error!');
                        return;
                    }
                    switch (action)
                    {
                        case 'message':
                            console.log('inBound message');
                            break;
                        default:
                            alert('Unknown inBound action: ' + action);
                            break;
                    }
                } catch (err) {
                    alert('Something went wrong, server returned invalid message!');
                }
            }, //end f inBound()
            outBound: function(action)
            {
                try {
                    switch (action)
                    {
                        case 'message':
                            create_message();
                            console.log('outBound message');
                            break;
                        default:
                            alert('Unknown outBound action: ' + action);
                            break;
                    }//end switch
                }
                catch (err) {
                    alert('Something went wrong, couldn\'t prepare data!');
                }


            }//end f outBound()
        }
        return f;
    }();
    var Filcai = new FilcaiClass();
    Filcai.init();
</script>

Answer 1

document.getElementById('chat_messages');

只返回一个元素，你不必使用[0]。

要在开始处包含子元素，您可以使用 insertBefore :

elem.insertBefore(div, elem.firstChild);