1

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

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

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

我使用了singletonjavascript 模式；

所有新的 DIV 标签，必须插入带有 id 的 DIV 标签chat_messages

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

使用时插入新的DIV标签失败elem[0].appendChild(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>
4

2 回答 2

3 
document.getElementById('chat_messages');

只返回一个元素，您不必使用[0].

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

elem.insertBefore(div, elem.firstChild);
于 2013-03-16T15:53:17.733 回答
2

您还没有说它不起作用的原因是什么，但只是略过这些行是可疑的：

var elem = document.getElementById('chat_messages');
elem[0].appendChild(div);

那里有两个问题：

  1. getElementById返回一个元素，而不是列表，因此不需要[0].

  2. appendChild 附加到元素（添加到它的末尾）。如果您希望新 div 位于顶部，则需要将其插入顶部，您可以通过以下方式进行insertBefore：

所以：

elem.insertBefore(div, elem.firstChild);

elem（如果一开始是空的，不用担心，elem.firstChild它将正确处理。）nullinsertBefore

于 2013-03-16T15:53:43.537 回答