2016-08-06 6 views
0

それにデータを追加する - ここに私のコードです:一部のデータがあるJavascriptを - どのように動的に新しいdiv要素を追加し、私はSignalRの基本的例で働いています

$('#box1').append('<li><strong>' + encodedName 
        + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>'); 

:上記ここ

<!DOCTYPE html> 
<html> 
<head> 
    <title>SignalR Simple Chat</title> 
    <style type="text/css"> 
     .container { 
      background-color: #99CCFF; 
      border: thick solid #808080; 
      padding: 20px; 
      margin: 20px; 
     } 
    </style> 

    <style type="text/css"> 
     .box { 
      background-color: #0000ff; 
      border: thick solid #008000; 
      padding: 20px; 
      margin: 20px; 
     } 
    </style> 


</head> 
<body> 
<div class="container"> 
    <input type="text" id="message"/> 
    <input type="button" id="sendmessage" value="Send"/> 
    <input type="hidden" id="displayname" /> 
</div> 

<div class="box" id="box1"> 
</div> 


<!--Script references. --> 
    <!--Reference the jQuery library. --> 
    <script src="Scripts/jquery-1.6.4.min.js" "></script> 
    <!--Reference the SignalR library. --> 
    <script src="/Scripts/jquery.signalR-2.0.0.js"></script> 
    <!--Reference the autogenerated SignalR hub script. --> 
    <script src="/signalr/hubs"></script> 
    <!--Add script to update the page and send messages.--> 
    <script type="text/javascript"> 
     $(function() { 
      // Declare a proxy to reference the hub. 
      var chat = $.connection.chatHub; 
      // Create a function that the hub can call to broadcast messages. 
      chat.client.broadcastMessage = function (name, message) { 
       // Html encode display name and message. 
       var encodedName = $('<div />').text(name).html(); 
       var encodedMsg = $('<div />').text(message).html(); 
       // Add the message to the page.  
       $('#box1').append('<li><strong>' + encodedName 
        + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>'); 
      }; 
      // Get the user name and store it to prepend to messages. 
      $('#displayname').val(prompt('Enter your name:', '')); 
      // Set initial focus to message input box. 
      $('#message').focus(); 
      // Start the connection. 
      $.connection.hub.start().done(function() { 
       $('#sendmessage').click(function() { 
        // Call the Send method on the hub. 
        chat.server.send($('#displayname').val(), $('#message').val()); 
        // Clear text box and reset focus for next comment. 
        $('#message').val('').focus(); 
       }); 
      }); 
     }); 
    </script> 
</body> 
</html> 

私のdivに追加され、それは境界線を持つ矩形であり、sthをテキストボックスに書くたびに新しいデータが表示され、矩形が大きくなりますが、私が新しいdiv(矩形)新しいテキストを書く。どうやってするか?

答えて

0

私はあなたのコードが正しいと思うが、あなたは書かれたテキストが、それはすでに、あなたは何もしないように持っているが、それはないが、その後のdivにテキストを追加する場合であるdiv.ifに以前appendeであるかどうかを確認する必要があります。

+0

それはそうではありません。 Append works、しかし私の箱は大きくなっています。私は、新しいテキストを書き、「送信」をクリックするたびに新しいボックスを追加したいと考えています。 –

+0

.insertAfter()を使用して新しいボックスを挿入する必要があります。 http://api.jquery.com/insertafter/ –

関連する問題