我创建了一个名为“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代码有点多,但它们都只是连接到服务器//
非常感谢任何有关在单击按钮发送的每条消息末尾获取元素的建议,谢谢!
最佳答案
您确实还需要显示更多代码,或者创建一个 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 只是将其移动到新位置)。
关于javascript - 跟随用户输入的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25825573/