Develop Reference

How to Make Script Flexible when New Item is Loaded in SharePoint Folder

I am seeking help with my JavaScript script to make it expandable when a new item (video) is added to my SharePoint folder. I created a counter that counts each time the video button is selected and displays the new count inside a div. The script works as expected but I like to expand its capability to automatically adjust when a new video is added into the SharePoint video folder. The video is dynamically added to an HTML page when dropped into the folder. However, when I add a new video its loads into the zero-index position and move the others video down one; making the previous video in the zero-index position to the one position and so on. Can someone view my script and see; if possible, how I can make my current script adjust accordingly when the new video is loaded? I like to make it where I do not have to go back into script and renumber everything by hand when a new video is added. I hope this question make sense.
jQuery(document).on("click", "#column5", function() {
videoHits();
getFilesFromFolder("/sites/dcsa/ep/epMainFiles/BI/video").done(function(data) {
$.each(data.d.results, function(i, item) {
var spDate = new Date(item.TimeCreated.split('T')[0]) //example: '2015-10-30T05:00:00Z'
var newTillDate = new Date();
spDate.setDate(spDate.getDate() + 2);
if (spDate <= newTillDate) {
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html("Videos");
} else {
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html('<img class="newArrow" style="width: 60px; position: relative; right: 5px; top: 0px;"src="../SiteAssets/SitePages/Test Page/icons/arrow-with_new2.gif" alt="logo">Videos');
}
});
});
});
///Read hits from growVideoHits List
function videoHits() {
jQuery(document).ready(function() {
var chartData = getListData("growVideoHits"); //vidHit
var data = [];
for (var i = 0; i < chartData.length; i++) {
data.push({
"label": chartData[i].Title
});
}
initChart(data);
});
function initChart(chartData) {
//console.log(chartData);
//Filter List Column for Specific Column Item
var view0 = chartData.filter(function(d) {
if (d["label"] == "Test Video") {
return d;
}
})
var view1 = chartData.filter(function(d) {
if (d["label"] == "GROW HHM Guest Speaker") {
return d;
}
})
var view2 = chartData.filter(function(d) {
if (d["label"] == "GROW Meeting 26 Aug 2020") {
return d;
}
})
var pageCount0 = view0.length;
var pageCount1 = view1.length;
var pageCount2 = view2.length;
d3.select('#vidHit0 span').html(pageCount0);
d3.select('#vidHit1 span').html(pageCount1);
d3.select('#vidHit2 span').html(pageCount2);
} //End of D3 function For Column Chart
function getListData(listName) {
var results;
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=Title";
$.ajax({
url: requestUri,
type: "GET",
async: false,
headers: {
"ACCEPT": "application/json;odata=verbose"
},
success: function(data) {
results = data.d.results;
},
error: function() {
//alert("Failed to get details");
}
});
return results;
}
}
////Play Buttons
jQuery(document).on("click", '[id^=growPlayPauseBtn]', function(e) {
growBtn_Event(e);
});
function growBtn_Event(e) {
if ($(e.target).attr("id") == 'growPlayPauseBtn0') {
//alert('0');
var title = "Test Video";
AddListItem(title);
videoClip0.play();
jQuery("#growPlayPauseBtn0").html("Pause");
jQuery("#growPlayPauseBtn0").fadeOut();
}
if ($(e.target).attr("id") == 'growPlayPauseBtn1') {
//alert('1');
var title = "GROW HHM Guest Speaker";
AddListItem(title);
videoClip1.play();
jQuery("#growPlayPauseBtn1").html("Pause");
jQuery("#growPlayPauseBtn1").fadeOut();
}
if ($(e.target).attr("id") == 'growPlayPauseBtn2') {
/// alert('2');
var title = "GROW Meeting 26 Aug 2020";
AddListItem(title);
videoClip2.play();
jQuery("#growPlayPauseBtn2").html("Pause");
jQuery("#growPlayPauseBtn2").fadeOut();
}
}
function AddListItem(TitleField) {
$().SPServices({
operation: "UpdateListItems",
async: false,
batchCmd: "New",
listName: "growVideoHits", //vidHit
valuepairs: [
["Title", TitleField]
],
completefunc: function(xData, Status) {
//alert("Data Saved! and Please check your List");
}
});
}
How I add content to the HTML: I use the REST API get option to detect a new item loaded into the SharePoint folder.
getFilesFromFolder("/sites/dcsa/ep/epMainFilesBI/video").done(function(data){
Then I concatenate the items from the folder onto the HTML page with the below script:
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn'+ i +'" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip'+ i +'"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit'+ i +'">Views: <span></span></div></li>');

if i have well understood your code, the new item are created in the else part so i suggest you to do a first loop to detect old videos from new videos and create html after:
getFilesFromFolder("/sites/dcsa/ep/epMainFiles/BI/video").done(function(data) {
$.each(data.d.results, function(index, item) {
var spDate = new Date(item.TimeCreated.split('T')[0]) //example: '2015-10-30T05:00:00Z'
var newTillDate = new Date();
spDate.setDate(spDate.getDate() + 2);
var newitems = [], olditems= [];
if (spDate <= newTillDate) {
olditems.push(item);
} else {
newitems.push(item);
}
var nbrolditems = olditems.length;
for(let i = 0;i < nbrolditems; i++){
let item = olditem[i];
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html("Videos");
}
for(let j = 0;j < newitems.length; j++){
let item = olditem[j;
let i = j + nbrolditems;
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html('<img class="newArrow" style="width: 60px; position: relative; right: 5px; top: 0px;"src="../SiteAssets/SitePages/Test Page/icons/arrow-with_new2.gif" alt="logo">Videos');
}
});
});
Another idea is to sort the list by date of creation of video....

How to change animated status bar value with same class but different part

I do need for these status bars to work for each own. Maybe also the buttons could worked. I tried to acquire the value of "data-bar" without succeed (the script does still can process the "data-max"). And seems that the script does apply to all bars, not individually, while I need that it differs for each bar.
In html:
<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>
<br>
<!-- Trying to set attr value manually -->
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>
In script:
<script>
/* Requiring jQuery.js */
$(document).ready( function(){
/* Print the bar elements at the screen */
$(".stat-bar").html(
"<div class='stat-bar-main-shade-min'></div>" +
"<div class='stat-bar-main-shade-plus'></div>" +
"<div class='stat-bar-main'></div>" +
"<div class='stat-bar-text'></div>"
);
/* Animating a changed variable */
setInterval(function(){ // 2 second interval change
/* Get attr value from the stat bar */
var bar = $(".stat-bar");
if (bar){ // bar
var maxStat = bar.attr("data-bar-max");
/* Probably working area (remove "//" from a case and add it to all other case) */
/* Case A (testing): randomized attr value for "[data-bar]" (it works) */
// var currentStat = Math.floor((Math.random() * 100) + 50);
/* Case B (testing):: manual attr value for test (it works) */
var currentStat = 41;
/* Case C (what is demanded): getting attr value from "[data-bar]" (doesn’t works) */
// var currentStat = bar.attr("data-bar");
/* END Probably working area */
if (currentStat > maxStat){currentStat = maxStat;
} else if (currentStat < 0){currentStat = 0;
} else {currentStat = currentStat;}
} // END bar
var a = currentStat * (100 / maxStat);
$(".stat-bar-text").html("<span class='stat-bar-text-stat'>" + currentStat + "</span>" + "/" + "<span class='stat-bar-text-stat'>" + maxStat + "</span>" + " " + "<span class='stat-bar-text-stat'>" + "(" + Math.round(a) + "%" + ")" + "</span>");
setTimeout(function(){
$(".stat-bar-main-shade-min").animate({"width": a + "%"}, 800);
$(".stat-bar-main-shade-plus").animate({"width": a + "%"}, 300);
$(".stat-bar-main").animate({"width": a + "%"}, 700);
}, 400);
}, 2000); // END 2 second interval change
});
</script>
In css:
<style>
.stat-bar{
background-color: #ACB597;
height: 26px;width: 60vw;
margin: 0 auto;
overflow: hidden;
border: solid 1px #686E59;
border-radius: 4px;
box-shadow: inset 0 0 0 0.5px #888E79;
}
.stat-bar-main{
background-color: #464D51;
height: 30px;width: inherit;
bottom: 50px;
position: relative;
}
.stat-bar-main-shade-min{height: 100%;width: 100%;}
.stat-bar-main-shade-plus{
height: 100%;width: 100%;
bottom: 24px;
position: relative;
}
.stat-bar-main-shade-min, .stat-bar-main-shade-plus{
background: linear-gradient(90deg, rgba(70,77,81,1) 95%, rgba(70,77,81,0) 100%);
opacity: 0.35;
}
.stat-bar-text{
color: rgba(255,255,255,0.8);
font: 400 10px "opensans";
letter-spacing: 0.09em;
line-height: 24px;
height: 24px;
bottom: 78px;
position: relative;
box-shadow: inset 0 0 5px transparent;
}
</style>

You can use each loop to iterate through your divs and get required values i.e : attributes then use $(this).find("someclass") to get reference of divs where you need to change widths and texts.
Demo Code :
$(document).ready(function() {
$(".stat-bar").html(
"<div class='stat-bar-main-shade-min'></div>" +
"<div class='stat-bar-main-shade-plus'></div>" +
"<div class='stat-bar-main'></div>" +
"<div class='stat-bar-text'></div>"
);
setInterval(function() {
//loop through stat bar
$(".stat-bar").each(function() {
//get datas from divs
var maxStat = parseInt($(this).attr("data-bar-max"));
var currentStat = parseInt($(this).attr("data-bar"));
//depend on value change currentstat
currentStat > maxStat ? currentStat = maxStat : currentStat = currentStat;
var a = currentStat * (100 / maxStat);
//find statbartext inside div
$(this).find(".stat-bar-text").html("<span class='stat-bar-text-stat'>" + currentStat + "</span>" + "/" + "<span class='stat-bar-text-stat'>" + maxStat + "</span>" + " " + "<span class='stat-bar-text-stat'>" + "(" + Math.round(a) + "%" + ")" + "</span>");
///same find and apply effect there
$(this).find(".stat-bar-main-shade-min").animate({
"width": a + "%"
}, 800);
$(this).find(".stat-bar-main-shade-plus").animate({
"width": a + "%"
}, 300);
$(this).find(".stat-bar-main").animate({
"width": a + "%"
}, 700);
})
}, 2000); // END 2 second interval change
});
.stat-bar {
background-color: #ACB597;
height: 26px;
width: 60vw;
margin: 0 auto;
overflow: hidden;
border: solid 1px #686E59;
border-radius: 4px;
box-shadow: inset 0 0 0 0.5px #888E79;
}
.stat-bar-main {
background-color: #464D51;
height: 30px;
width: inherit;
bottom: 50px;
position: relative;
}
.stat-bar-main-shade-min {
height: 100%;
width: 100%;
}
.stat-bar-main-shade-plus {
height: 100%;
width: 100%;
bottom: 24px;
position: relative;
}
.stat-bar-main-shade-min,
.stat-bar-main-shade-plus {
background: linear-gradient(90deg, rgba(70, 77, 81, 1) 95%, rgba(70, 77, 81, 0) 100%);
opacity: 0.35;
}
.stat-bar-text {
color: rgba(255, 255, 255, 0.8);
font: 400 10px "opensans";
letter-spacing: 0.09em;
line-height: 24px;
height: 24px;
bottom: 78px;
position: relative;
box-shadow: inset 0 0 5px transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>
<br>
<!-- Trying to set attr value manually -->
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>

Unable to show formatted HTML in Tooltip

I have an existing Classic ASP site that I am converting to C#/ASP.NET. In this legacy site, they use the following code to display HTML data (as opposed to plain text) as a tooltip. The existing code formats some tables using HTML and then uses a depreciated method to make them a tooltip. Example:
function EnterContent(layerName, TTitle, TContent, RecordNum) {
ContentInfo = '<table border="1" style="width: 200px; border-top-color: #808080; border-right-color: #808080; border-bottom-color: #808080; border-left-color: #808080; padding:0; border-spacing:0 ">' +
'<tr><td style="width: 100%; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000">' +
'<table border="0" style="width: 100%;padding: 0; border-spacing: 0; background-color: #C0C0C0">' +
'<tr><td style="width: 100%; border-top-color: ' + topColor + '; border-right-color: ' + topColor + '; border-bottom-color: ' + topColor + '; border-left-color: ' + topColor + '">' +
'<table style="width: 100%;padding :0;border-spacing: 0;text-align: center" >' +
'<tr><td style="width: 100%; background-color: #0000FF">' +
'<div class="tooltiptitle">' + TTitle + '</div>' +
'</td></tr>' +
'</table>' +
'</td></tr>' +
'<tr><td style="width: 100%; border-top-color: ' + subColor + '; border-right-color: ' + subColor + '; border-bottom-color: ' + subColor + '; border-left-color: ' + subColor + '">' +
'<table {padding:5} style="width: 100%;border-spacing: 0;text-align: center">' +
'<tr><td >' +
'<font class="tooltipcontent">' + TContent + '</font>' +
'</td></tr>' +
'</table>' +
'</td></tr>' +
'</table>' +
'</td></tr>' +
'</table>';
ReplaceContent(ContentInfo, RecordNum)
}
And here is the way they did it in the legacy code:
function ReplaceContent(layerName){
if(ie){document.all[layerName].innerHTML = ContentInfo}
if(ns){
with(document.layers[layerName].document) {
open();
write(ContentInfo);
close();
}
}
}
Notice it uses Document Layers to populate the tooltip. This is depreciated and will not work with modern browsers. Here is what I came up with:
function ReplaceContent(ContentInfo, RecordNum) {
var HTMLElement = document.getElementById(RecordNum)
// alert(ContentInfo)
HTMLElement.title = ContentInfo
}
This kind of works. It shows a tooltip, but the info in the tool tip is the plain text of the HTML formatted tables. I am not sure that you can even populate HTML successfully into the tooltip (i've seen posts say you can and can't).
In my version, RecordNum is the control ID (in this case, its a TD in the first line). Example here:
<b>1.</td><td width="100%" ID= \"" + aActions[i,0] + "\" runat=\"server\ "><span onMouseover="EnterContent('ToolTip','New Assignment','<b>Action Taken by:</b>
<br>SOMEONES NAME<br>on Monday, October 28, 2019<br>at 9:11:50 AM EST<fieldset style=padding:2>
<legend><b>Comment</b>
</legend> SOMEONES NAME has been assigned as Person initiating the Help Call (Caller).</fieldset>'); Activate();"'
onmouseout="deActivate()">
This is the 2nd part that opens the links page (it is working correctly):
<font class="ActionName"><b>New Assignment</span> </font><br></font>
<span id="actionspan2" style="display=none;"><font class="ActionData"> SOMEONES NAME <br>on Monday, October 28, 2019<br>
at 9:11:50 AM EST<br></span>
</font></td></tr><tr><td width="19" valign="top"><center><font class="ActionData">
Here is how the tooltip is suppose to appear
So, my problem is that I can get the proper text to the tooltip, but it doesn't display in an HTML format. I have tested the HTML code to make sure it was not the problem. I pasted it into the .aspx page and verified it displays correctly. I am not a Javascript expert by any means, so apologies in advance if I have follow up questions.

This code allows you to have html in a tooltip. Please change the css styling as needed:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: #ffffff;
text-align: center;
border-radius: 6px;
border: 1px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip .tooltiptext TH {
background-color: blue;
color: #fff;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me
<span class="tooltiptext">
<table>
<tr>
<th>
SOMEONES NAME <br>on Monday, October 28, 2019
at 9:11:50 AM EST<br>
</th>
</tr>
<tr>
<td valign="top">
More data here
</td>
</tr>
</table>
</span>
</div>
</body>
</html>
A couple ideas:
Perhaps you could create the tooltip information when you create the links (instead of on the fly).
You can also use an ajax call to get the information when you hover over it as well.
The code found here is a good way to use tooltips with CSS:
https://www.w3schools.com/howto/howto_css_tooltip.asp
It looks like you are changing the title. The original code changes the innerHTML. You can still assign the innerHTML of the div using this syntax:
document.getElementById(RecordNum).innerHTML = "whatever";
I am also a big fan of jQuery which has many of the UI features built in:
https://jqueryui.com/tooltip/

How to build a complex HTML dynamically using jquery

I am tryin to build some HTML dynamically.The HTML as a div , within which there is a table and within one of the columns of the table , there is another table.
At present ,I am using .append method of jquery,which does not seem to be working. I am getting "unable to get property of childnodes of undefined".The application only makes use of IE. Could I be pointed in the right direction. What am I doing wrong here?
$("<div style='background-color: #757575 border: 1px solid gray; ").append("MainDiv");
$("<table style='width: 100%; height: 100%'>").append("MainDiv");
$("<tr>" + "<td>" +
"<table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
"<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
"<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
"</tr>" +
"</table></td></tr></table></div>").append("MainDiv");

You could use append() like :
var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});
var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
"<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
"<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
"</tr>" +
"</table></td></tr>");
container_div.append(table);
$("#MainDiv").append(container_div);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>
Hope this helps.
NOTE : I suggest to create a class for the shared style between all tds so the code will be more readable :
var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});
var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td style='width:70px;' class='col' nowrap>ID</td>" +
"<td style='width:100px' class='col'>Name</td>" +
"<td style='width: 90px;text-align:left;' class='col'>Status</td>" +
"</tr>" +
"</table></td></tr>");
container_div.append(table);
$("#MainDiv").append(container_div);
.col{
background-color: #999999;
font-weight: bold;
color: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>

You are close but not quite there.
$('MainDiv').append('some html here')
The .append method works in such a way that you have a selector:
$('MainDiv')
This selects some DOM element that you have available to work with, you then call the .append method on it:
$('Some Selector').append('Some HTML');
this inserts the html denoted by append() as the last child element of the selector $('Some Selector'), more on this can be found here.
You might also want to consider putting all the HTML you want to add into an array of strings that you can then loop through and append each of them to some element. This isn't the best way to achieve your goal but is a good way to understand jQuery and some of it's DOM manipulation methods.

JS Object formatting in html issue

I have a function that renders an object in html.
.item {
padding: 10px;
margin: 20px;
display: inline-block;
position: relative;
border: 1px solid #666;
background: #ddd;
}
.item h4 {
font-size: 18px;
text-align: center;
}
.item h5 {
font-size: 14px;
text-align: center;
}
.item img {
width: 200px;
height: 200px;
}
I seem to be missing a formatting issue. The JS compiles properly, no errors, but both the h4 tag and the h5 tag render outside the , even though in code the closing div tag is after the h4 and h5 tags.
Here ids the HTML after it gets rendered in the browser
<div class="menuHolder" id="menuContainer">
for (var i = 0; i < foodItems.length; i++) {
document.getElementById("menuContainer").innerHTML += '<div class="item"> <img src="' + foodItems[i].image + '" >';
document.getElementById("menuContainer").innerHTML += '<h4> ' + foodItems[i].name + '</h4>';
document.getElementById("menuContainer").innerHTML += '<h5> $' + foodItems[i].price + '</h5>';
document.getElementById("menuContainer").innerHTML += '</div>';
console.log("Item: " + foodItems[i].name + " Cost: $" + foodItems[i].price);
}
.item {
padding: 10px;
margin: 20px;
display: inline-block;
position: relative;
border: 1px solid #666;
background: #ddd;
}
.item h4 {
font-size: 18px;
text-align: center;
}
.item h5 {
font-size: 14px;
text-align: center;
}
.item img {
width: 200px;
height: 200px;
}
<div class="menuHolder" id="menuContainer">
<div class="item">
<img src="images/hamburger.jpg"></div>
<h4>Hamburger</h4>
<h5>$2.99</h5><div class="item">
<img src="images/fries.jpg"></div>
<h4>Fries</h4>
<h5>$1.99</h5>
<div class="item">
<img src="images/donuts.jpg">
</div>
<h4>Donuts</h4>
<h5>$0.99</h5>
</div>

Try this:
for (var i = 0; i < foodItems.length; i++) {
var tmpstr = '<div class="item"> <img src="' + foodItems[i].image + '" >';
tmpstr += '<h4> ' + foodItems[i].name + '</h4>';
tmpstr += '<h5> $' + foodItems[i].price + '</h5>';
tmpstr += '</div>';
document.getElementById("menuContainer").innerHTML = tmpstr;
console.log("Item: " + foodItems[i].name + " Cost: $" + foodItems[i].price);
}
When you added string to innerHTML, browsers may "auto correct" the html and added at the end.
P.S. you may need to take care of escaping characters in your foodItems[i].name.