如何为聊天气泡创建循环？

Question

我想为聊天气泡开发一个循环。 每次我写一条消息时，都应该创建一个气泡并在右侧。 当聊天伙伴回复时，消息应位于气泡左侧。 我怎样才能开发这个循环？

我目前的代码是这样的：

 <div class="Webview"> <div class="message_container" id="myForm"></div> <form class="send_container"> <input id="textField" type="text"> <p> <input type="button" id="theButton" value="Nachricht absenden!" onclick="document.getElementById('myForm').innerHTML=document.getElementById('textField').value" /> </p> <h3> <div id="div"></div> </h3> </form> </div>

Answer 1

好的，它不是在循环中向 DOM 添加消息，而是在发送消息的触发器上在 Enter 上添加消息。

如果要从文本字段添加值，例如文本输入，您可能需要执行两个步骤：

1. 从输入中获取值
2. 将值注入到气球模板 (html) 中，然后再注入 DOM。

然后，您应该将 Javascript 范围添加到您的 html 中，或者只包含包含以下功能的 js 文件：

 function addMessage() { // Add XSS validation const $messages = document.getElementById('myForm'); const $textElement = document.getElementById('textField'); const newMessage = '<div class="message-balloon">' + $textElement.value + '</div>'; $messages.innerHTML += newMessage; return false; }

 <input type="button" id="theButton" value="Nachricht absenden!" onclick="addMessage()" />

在 jQuery 中，它将是这样的（当然在 js 范围内）：

 $("#theButton").off('click').on('click', function() { e.preventDefault(); const $messages = $('#myForm'); const $textElement = $('#textField'); const newMessage = '<div class="message-balloon">' + $textElement.value + '</div>'; $messages.html += newMessage; return false; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="button" id="theButton" value="Nachricht absenden!" />

希望能帮助到你 ：）
祝你好运