如何为每个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>
这是我试过的代码:
var codeToInsert="<li class="clearfix"><div class="message-data align-right"><span class="message-data-time" >messaggio.timestamp</span> <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);
答案 0 :(得分:0)
您可以使用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> <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);
答案 1 :(得分:0)
变量codeToInsert
未正确定义,timestamp
和body
应动态添加到codeToInsert
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> <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;
答案 2 :(得分:0)
你的代码有一个严重的缺陷。 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>
<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>
`);
});
});