Singleton javascript appendChild

Question

我想在DIV標記中插入DIV標記;

我有一個主DIV標籤，我需要在主DIV標籤內插入很多DIV標籤;

我想開發一個CHAT，所以最新的DIV標籤必須在所有舊的DIV標籤之前加上玩家發送的文本;

我用了一個singleton javascript模式;

所有的新DIV標籤，必須在DIV標籤插入ID chat_messages

我tryed使用此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> 

Answer 1

你還沒說什麼約它不工作，只是通過這些線略讀是犯罪嫌疑人：

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將是null和insertBefore處理正確。）

Answer 2

document.getElementById('chat_messages'); 

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

要包括在開始你可以使用insertBefore子元素：

elem.insertBefore(div, elem.firstChild);