Question

我对编码完全不熟悉。请帮忙。我使用node.js获取tweet文本并使用html显示。当我输入新文本时，结果应该替换#tweets中的早期结果而不是附加到它

<!DOCTYPE html>
<html>
<head>  
</head>

<body>

    <form>
       #<input type="text" id="tag" class="hash"/>
       <button>submit</button>
   </form>
   <div id="tweets"></div>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
   <script src="/socket.io/socket.io.js"> </script>
   <script>
   var socket = io.connect('/link');

   $('.hash').on('keypress',function(){
    setTimeout(function(){
        $('#tweet').empty();
        socket.emit('message', $('#tag').val());
    },2000);

    return;
    });

   socket.on('message', function(msg){
        $('#tag').val('');
        $('#tweet').empty();
        $('#tweets').after($('<div>').text(msg));
    });

   </script>

</body>
<html>

Answer 1

将.after替换为.html：

$('#tweets').html($('<div>').text(msg));

Answer 2

如果我理解正确，请使用text或innerHTML。例如：

...
socket.on('message', function(msg){
        $('#tag').val('');
        $('#tweet').html(msg); //OR
        $('#tweet').text(msg);

    });
...

Answer 3

是否也有拼写错误的JQuery选择器？我找不到元素＆＃34; #tweet。＆＃34;它出现在超时和套接字事件处理程序中。我个人认真考虑，尤其是是选择器拼写问题。

$("<div />", {
    text: msg
}).appendTo($("#tweets").empty());

编辑：我喜欢SlyBeaver的主旨。我认为你出于某种原因需要一个内部div。我没有处理.empty().append().chain().a().bunch().of().stuff()，而只是处理纯文本：

$("#tweets").text(msg);

或如果推文包含HTML，请使用此功能，否则将不会对其进行解析：

$("#tweets").html(msg);

Answer 4

更改

 $('#tweets').after($('<div>').text(msg));

在jquery中使用.html()

$('#tweets').html($('<div>').text(msg));

Answer 5

document.getElementById('tweets').innerHTML = 'Your content';

使用新条目更改div的值，不要追加

5 个答案: