Question

我创建了一个名为“兔子”的元素（图像div），一个输入表单和一个字段集。我还有一个localhost web服务器，它运行我的websocket服务器进行聊天。我试图实现一个函数，对于每个消息（跨度）发送，bunny元素放在每个消息旁边。

我遇到的问题是：

由于消息是span，因此bunny元素会自行复制并附加到每个跨度而不仅仅是消息的末尾。
兔子元素并不紧挨着消息，它通常位于新行的跨度之下，我在JS中尝试了appendTo和InsertAfter

HTML：

<div id="bunny">
</div>

<input id="message" type="text" />
<button type="button" id="movebunny">Bunny</button>

<fieldset id="showMsg" >
<!--messages are shown here-->
</fieldset>

JAVASCRIPT

var messages;
var form;
var inputBox;

function log_msg(msg) {
  messages.appendChild(document.createElement("span")).innerHTML = msg;
} 

function doInit() {
  inputBox = document.getElementById("message");
  messages = document.getElementById("messages");
  form = document.getElementById("message-form");
  var s;
  ...

//还有更多的js代码，但他们只是连接到服务器//

非常感谢任何有关在点击按钮时发送每封邮件末尾的元素的建议，谢谢！

Answer 1

你真的需要显示更多的代码，或者创建一个jsfiddle但没有额外的上下文：只使用不同的骨架（注意fieldset不是真实的内容。字段集用于表单字段。你用它来包装惰性消息）：

<div class="messages">
  <div class="message">
    <div class="from sender">bob</div>
    <div class="body">blahblahblah</div<
  </div>
  <div class="message">
    <div class="from listener">carol</div>
    <div class="body">blahblahblah</div<
  </div>
  ...
</div>

每次收到新消息时，appendChild将其.messages转换为bunny div，然后将<div class="messages"> ... <div class="message"> <div class="from">carol</div> <div class="body">blahblahblah</div< <div class="bunny">^_^</div> </div> </div>元素移动（不复制）到最后一条消息中。你得到像

这样的东西

div.messages { position: relative; }
.from.listener { float: left; position: relative; }
.from.sender { float: right; position: relative; }
.bunny { width: ...; height: ...; background: url('bunny.png'); }
.from.listener .bunny { position: absolute; left: 0}
.from.sender .bunny { position: absolute; right: 0}
.hidden { display: none!important; }

然后你使用CSS来确保兔子在正确的位置。

<div class="hidden bunny">^_^</div>

在有任何消息之前，将Bunny元素一直放在顶部：

var bunny = document.querySelector(".bunny");

你只需使用

移动兔子

var newmsg = ....;
bunny.classList.remove("hidden");
newmsg.appendChild(bunny);
messages.appendChild(newmsg);

一开始就这样你有一个持久的引用，然后每次你建立一个新的消息

appendChild

完成，{{1}}在页面上移动元素（因为DOM元素不能同时存在于两个地方，因此页面元素的appendChild只是将其移动到新位置。）

跟随用户输入的元素

1 个答案: