Question

如何为每个js响应创建一个新的div？消息是包含发送和接收的所有消息的JSON。

这是我的JS：

$.get("MessageServlet", function (responseJson) {           
$.each(responseJson, function (index, message) {

 //code to create a div for each response

});
  });

我的div就像：

<div id="somediv">
  <li class="clearfix">
     <div class="message-data align-right"> 
 </div>
   <div id ="messagesent" class="message other-message float-right">
      Hello
   </div>
   </li>
  </div>

div应该创建这样的消息

这是我试过的代码：

var codeToInsert="<li class="clearfix"><div class="message-data align-right"><span class="message-data-time" >messaggio.timestamp</span> &nbsp; &nbsp;<span class="message-data-name" >You</span> <i class="fa fa-circle me"></i></div><div id ="messagesent" class="message other-message float-right">messaggio.body</div></li>";

var addMessage =document.getElementById('somediv');                                       
addMessage.insertAdjacentHTML('beforeend', codeToInsert);

Answer 1

您可以使用prepend方法测试此JQuery代码：

<强> JQuery的：

var messageBody = "Some text",
    codeToInsert = '<li class="clearfix"><div class="message-data align-right"><span class="message-data-time" >messaggio.timestamp</span> &nbsp; &nbsp;<span class="message-data-name" >You</span> <i class="fa fa-circle me"></i></div><div id ="messagesent" class="message other-message float-right">'+messageBody+'</div></li>';

var addMessage = $('#somediv');
addMessage.prepend(codeToInsert);

Answer 2

变量codeToInsert未正确定义，timestamp和body应动态添加到codeToInsert

＆＃13;

var responseJson = [{
  "timestamp": "00001",
  "body": "body 001"
}, {
  "timestamp": "00002",
  "body": "body 002"
}, {
  "timestamp": "00003",
  "body": "body 003"
}];


var codeToInsert = "";
var addMessage = document.getElementById('somediv');

$.each(responseJson, function(index, message) {

  codeToInsert = "<li class='clearfix'><div class='message-data align-right'><span class='message-data-time' >" + message.timestamp + "</span> &nbsp; &nbsp;<span class='message-data-name'>You</span> <i class='fa fa-circle me'></i></div><div id ='messagesent' class='message other-message float-right'>" + message.body + "</div></li>";

  addMessage.insertAdjacentHTML('beforeend', codeToInsert);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="somediv">
  <li class="clearfix">
    <div class="message-data align-right">
    </div>
    <div id="messagesent" class="message other-message float-right">
      Hello
    </div>
  </li>
</div>

＆＃13;

Answer 3

你的代码有一个严重的缺陷。 var codeToInsert="<li class="cl...不会逃避引用。

除此之外，你的问题的答案是：

$.get("MessageServlet", function (responseJson) {           
    $.each(responseJson, function (index, message) {

        $('#somediv').append(`
            <li class="clearfix">
                <div class="message-data align-right">
                    <span class="message-data-time">
                        ${message.timestamp}
                    </span> &nbsp; &nbsp;
                    <span class="message-data-name" >
                        You
                    </span>
                    <i class="fa fa-circle me"></i>
                </div>
                <div id ="messagesent" class="message other-message float-right">
                    ${message.body}
                </div>
            </li>
        `);

    });
});

如何为每个javascript响应创建一个新的div

3 个答案: