javascript - 跟随用户输入的元素

Question

我创建了一个名为“bunny”的元素(图像 div)、一个输入表单和一个字段集。我还有一个本地主机 Web 服务器，它运行我的 websocket 服务器以进行聊天。我正在尝试实现一个函数，其中对于发送的每条消息(跨度)，兔子元素都放置在每条消息旁边。

我在执行此操作时遇到的问题是:

• 由于消息是跨度的，因此 bunny 元素会复制自身并附加到每个跨度，而不仅仅是消息的末尾。

• bunny 元素并不正好位于消息旁边，它通常位于新行的 span 下方，我在 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 但没有额外的上下文:只需使用不同的骨架(请注意，字段集并不真实地说明其中的内容。字段集用于表单字段。您正在使用它来包装惰性消息):

<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 div，然后移动(而不是复制)bunny 元素添加到最后一条消息中。你会得到类似的东西

<div class="messages">
  ...
  <div class="message">
    <div class="from">carol</div>
    <div class="body">blahblahblah</div<
    <div class="bunny">^_^</div>
  </div>
</div>

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

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

在出现任何消​​息之前，将兔子元素一直放在顶部:

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

你只需使用以下方法将兔子向下移动

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

从一开始就一直这样，这样您就有一个持久的引用，然后每次构建新消息时

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

done, appendChild 在页面上移动元素(因为 DOM 元素不能同时存在于两个位置，因此页面元素的appendChild 只是将其移动到新位置)。