Javascript - wie neue div dynamisch hinzuzufügen und Daten anhängen, um es

ich grundsätzlich Beispiel SignalR arbeite - hier ist mein Code:Javascript - wie neue div dynamisch hinzuzufügen und Daten anhängen, um es

<!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>

Hier oben:

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

Einige Daten hinzugefügt zu meinem div, es ist ein Rechteck mit Rahmen, und jedes Mal, wenn ich etw in Textfeld schreibe, werden neue Daten angezeigt, und Rechteck wird größer, aber ich möchte jedes Mal ein neues div (Rechteck) über einem anzeigen, wenn ich schreibe einen neuen Text. Wie geht das?

Quelle

2016-08-06 mike_pl

Ich denke, Ihr Code ist richtig, aber Sie müssen überprüfen, ob der geschriebene Text zuvor oder nicht an die div.if ist, wenn es bereits dann Sie nichts tun müssen, aber wenn es nicht dort dann Ihren Text an die div.

Quelle

2016-08-06 10:41:11

Es geht nicht darum. Append funktioniert, aber dann wird meine Box größer. Ich möchte jedes Mal ein neues Feld hinzufügen, wenn ich einen neuen Text schreibe und auf 'send' klicke –

, musst du .insertAfter() verwenden, um ein neues Feld einzufügen. http://api.jquery.com/insertafter/ –

Javascript - wie neue div dynamisch hinzuzufügen und Daten anhängen, um es

Antwort

Verwandte Themen