如何为每个JavaScript响应创建新div？附现有代码示例

我来帮你搞定这个问题！你已经搭好了从Servlet获取消息的基础框架，接下来只需要在$.each循环里动态生成你需要的div结构就行。下面给你两种实用方案，还有几个关键细节要注意：

方案一：用jQuery DOM创建方法（更安全，避免XSS） #

这种方法通过jQuery的DOM元素创建API来构建结构，能自动处理内容转义，防止跨站脚本攻击：

$.get("MessageServlet", function (responseJson) {
  // 先获取存放消息的容器
  const $messageContainer = $("#somediv");
  
  $.each(responseJson, function (index, message) {
    // 创建外层的li元素
    const $listItem = $("<li>").addClass("clearfix");
    
    // 创建消息数据栏（可以放时间、发送者等信息）
    const $messageData = $("<div>")
      .addClass("message-data align-right");
    // 假设你的message对象里有timestamp字段，填充时间
    $messageData.text(message.timestamp);
    
    // 创建消息内容div，注意ID要唯一！不能重复用"messagesent"
    const $messageContent = $("<div>")
      .attr("id", `messagesent-${index}`) // 用索引或消息ID生成唯一ID
      .addClass("message other-message float-right")
      .text(message.content); // 假设message里的content字段是消息内容
    
    // 把所有元素组装起来，添加到容器
    $listItem.append($messageData).append($messageContent);
    $messageContainer.append($listItem);
  });
});

方案二：HTML字符串拼接（更简洁） #

如果你的消息内容是可信的（比如来自内部系统，没有用户输入风险），可以用字符串拼接的方式，代码更简洁：

$.get("MessageServlet", function (responseJson) {
  const $messageContainer = $("#somediv");
  let messageHtml = "";
  
  $.each(responseJson, function (index, message) {
    // 先转义内容防止XSS攻击，这一步很重要！
    const safeContent = $("<div>").text(message.content).html();
    const safeTime = $("<div>").text(message.timestamp).html();
    
    // 拼接你的目标结构
    messageHtml += `
      <li class="clearfix">
        <div class="message-data align-right">
          ${safeTime}
        </div>
        <div id="messagesent-${index}" class="message other-message float-right">
          ${safeContent}
        </div>
      </li>
    `;
  });
  
  // 如果要替换现有所有消息用html()，如果是追加新消息用append()
  $messageContainer.append(messageHtml);
});

关键注意点 #

• ID唯一性：你示例里的id="messagesent"不能重复用在多个元素上，这违反HTML规范，所以我用messagesent-${index}生成唯一ID，如果你消息有自己的唯一标识（比如message.id），用它更好。
• 消息区分样式：如果需要区分自己发送和接收的消息，可以根据message里的字段（比如message.sender === 'me'）切换CSS类，比如自己的消息用my-message float-right，对方的用other-message float-left，同时调整.message-data的对齐类。
• 内容转义：不管用哪种方案，都要确保消息内容被转义，避免XSS攻击，上面两种方案都做了处理。

内容的提问来源于stack exchange，提问作者Dani