1

DIVタグにタグを挿入したいDIV。

メインのDIVタグが1つあり、メインの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');

1つの要素のみを返します。を使用する必要はありません[0]。

開始時に子要素を含めるには、insertBeforeを使用できます。

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

あなたはそれが機能していないことについて何を言っていませんが、これらの線をざっと見ただけでは疑わしいです：

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

そこでの2つの問題：

  1. getElementByIdリストではなく要素を返すため、。は必要ありません[0]。

  2. appendChild 要素に追加します（要素の最後に追加します）。新しいdivを上部に配置する場合は、上部に挿入する必要があります。これは、次の方法で実行できますinsertBefore。

それで：

elem.insertBefore(div, elem.firstChild);

elem（最初は空であるかどうかを心配する必要はありelem.firstChildません。それを正しく処理します。）nullinsertBefore

于 2013-03-16T15:53:43.537 に答える