I am currently working on simulating a mailbox using Materialize for the design. In my collection view, I want to add cells dynamically, but I need help with appending HTML using JavaScript.
<div class="row" id="mailBox">
<div class="container col s7">
<div class="collection-header center">
<h4>Email Box</h4>
</div>
<ul class="collection with-header" id="mailCollection">
<!-- Start: Dynamically Adding Cells To this View -->
<li class="collection-item avatar email-unread">
<span class="circle indigo darken-1"></span>
<span class="email-title"> Subject </span>
<p class="truncate grey-text ultra-small"> Message </p>
<a href="#!" class="secondary-content email-time"><span class="blue-text ultra-small">Date Recieved</span></a>
</li>
<!-- End of Cell Content -->
</ul>
</div>
</div>
I am attempting to append collection items like this through my JavaScript code, but nothing is showing up:
function createHTML(){
var jsonData = jsonObject;
for(var i =0; i < jsonData.length; i++){
$("#mailCollection").append('<li class="collection-item avatar email-unread">' +
'<span class="circle indigo darken-1"></span>'
'<span class="email-title">' + jsonData[0] + '</span>'
'<p class="truncate grey-text ultra-small">' + jsonData[1] + '</p>'
'<a href="#!" class="secondary-content email-time"><span class="blue-text ultra-small">' + jsonData[2] + '</span></a>
</li>')
}
}