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);