We Keep Coding

append html text from JavaScript

I have a JavaScript function that takes Id and source and alignment... and append to html element due to the input parameter.
"<TR id='" + localMessageId + "' onmouseover='visiblepointmenu(\"" + localMessageId + "\");' onmouseout='hidepointmenu(\"" + localMessageId + "\");'>" +
"<TD class='td_left noselect' nowrap='nowrap' align='right'>" + Image + "</td>" +
"<TD class='td_center' style='table-layout:fixed; direction: " + direction + ";'>" +
"<TABLE cellSpacing=0 cellPadding=0>" +
"<TR style='HEIGHT:10px; " + VisibleHiddenTime + "'>" +
"<TD><div class='noselect' style='color:DarkGray;text-align:" + float_Timer + ";font-size: 11px;'>" + Name + dateMessage.ToString("hh:mm tt") + "</div></TD>" +
"</TR > " +
"<TR>" +
"<TD id = 'menu" + localMessageId + "' oncontextmenu='window.external.Menu(\"pointMenu#3\",\"" + message + "\", \"" + localMessageId + "\");'>" +
"<TABLE cellSpacing=0 cellPadding=0 style='background-image: url(data:image/png;base64," + previewLink.image_Base64 + ");" +
"background-position: center center;width:" + previewLink.width.ToString() + "px;height:" + previewLink.height.ToString() + "px; background-repeat: no-repeat; " +
"background-size: 100% 100%; float:" + float_Timer + ";'>" +
"<TBODY>" +
"<TR style='height: 83%;'>" +
"<TD class='description' onclick=openURL('" + url + "') style='cursor:pointer;padding-left:10px;' valign='bottom' align='left'>" +
"<font color='white' style='font-size: 110%'> " + previewLink.description + "</font>" +
"</TD>" +
"</TR>" +
"<TR style='vertical-align:top;'>" +
"<TD align='left' onclick=openURL('" + url + "') style='cursor:pointer; padding-left:10px;' >" +
"<font color='white' style='font-size: 100%' >" + homelink + "</font>" +
"</TD>" +
"</TR>" +
"</TBODY>" +
"</TABLE>" +
"</TD>" +
"<TD style='vertical-align:top;'>" +
"<div style='float:" + afloat + ";'>" +
"<img id='pnt" + localMessageId + "' class='noselect' draggable='false' src='data:image/png;base64," + SharedData.PointMenu + "' style='visibility:hidden;display:none;' onclick='window.external.Menu(\"pointMenu#3\", \"" + message + "\", \"" + localMessageId + "\");' />" +
"</div>" +
"</TD>" +
"</TR>" +
"</TABLE>" +
"</TD>" +
"<TD style='width:17px;' valign='top' align='left'>" +
"<img style='margin-top: 3px;" + visibility + "' id='read" + localMessageId + "' draggable='false' class='noselect' src='data:image/png;base64," + SharedData.getMessageStatusFromEnum(messageStatus, SendingMethode == SharedData.NotificationSendingMethod.AutoReply) + "'/>" +
"</TD>" +
"</TR>";
}
else
{
new_row = "<TR id='" + localMessageId + "' onmouseover='visiblepointmenu(\"" + localMessageId + "\");' onmouseout='hidepointmenu(\"" + localMessageId + "\");'>" +
"<TD class='td_left noselect' nowrap='nowrap' align='right'>" + Image + "</td>" +
"<TD class='td_center' id='Forward" + localMessageId + "' style='table-layout:fixed;direction:" + direction + ";'>" +
"<TABLE cellSpacing=0 cellPadding=0>" +
"<TR style='HEIGHT:10px; " + VisibleHiddenTime + "'>" +
"<TD><div class='noselect' style='color:DarkGray;text-align:" + float_Timer + "; font-size: 11px;'>" + Name + dateMessage.ToString("hh:mm tt") + "</div></TD>" +
"</TR>" +
"<TR>" +
"<TD id ='link" + localMessageId + "'>" +
"<div id='menu" + localMessageId + "' class='" + classname + "' oncontextmenu='window.external.Menu(\"pointMenu#3\",\"" + message + "\", \"" + localMessageId + "\");'>" +
" <P style='table-layout:fixed;'>" + text + "</p>" +
"</div>" +
"</TD>" +
"<TD style='vertical-align:top;'>" +
"<DIV style='float:" + afloat + ";'>" +
"<img id='pnt" + localMessageId + "' class='noselect' draggable='false' src='data:image/png;base64," + SharedData.PointMenu + "' style='visibility:hidden;display:none;');' onclick='window.external.Menu(\"pointMenu#3\", \"" + message + "\", \"" + localMessageId + "\");' />" +
"</DIV>" +
"</TD>" +
"</TR>" +
"</TABLE>" +
"</TD>" +
"<TD style='width:17px;' valign='top' align='left'>" +
"<img style='margin-top: 3px;" + visibility + "' id='read" + localMessageId + "' draggable='false' class='noselect' src='data:image/png;base64," + SharedData.getMessageStatusFromEnum(messageStatus, SendingMethode == SharedData.NotificationSendingMethod.AutoReply) + "'/>" +
"</TD>" +
"</TR>"
my problem is that id and all image sources and even some classes should be added at runtime from the function
I need a way better then concatenation because my code will be ugly if I type + every time
or want to know what is the best Practice

Search for text inside all child of a div and hide the ones that doesn't contain it

I would like to hide all the divs that doesn't contain the text i'm writing inside a .
i've tried with something like this:
var $searchBox = $('#search-weeazer');
$searchBox.on('input', function() {
var scope = this;
var $userDivs = $('.information ');
if (!scope.value || scope.value === '') {
$userDivs.show();
return;
}
$userDivs.each(function(i, div) {
$('div:contains(scope.value)').hide();
})
});
but doesn't work (i know i will hide the div that contains the text, was for testing purpose ^^)
The divs are created dynamically after an Ajax Call, and the structure of the div is this:
"<div class=\"row information text-white shadow-lg p-2 mb-2\">" +
"<div class=\"col-3 profilePicture\">" +
"<img src=\"../../img/bg-masthead.jpg\" alt=\"Immagine profilo\" class=\"profileImage rounded-circle\">" +
"<div class=\"results\">" +
"<div class=\"results-content\">" +
"<span class=\"stars\">3</span>" +
"</div>" +
"</div>" +
"</div>" +
"<div class=\"col-9 infos\">" +
"<div class=\"row\">" +
"<div class=\"col-4 nome\"><b>Nome: </b>" + nome + "</div>" +
"<div class=\"col-4 regione\"><b>Regione: </b>" + regione + "</div>" +
"<div class=\"col-4 citta\"><b>Città: </b>" + citta + "</div>" +
"</div>" +
"<div class=\"row\">" +
"<div class=\"col-4 dataNascita\"><b>Data di nascita: </b>" + eta + "</div>" +
"<div class=\"col-4 coaching\"><b>Coaching online: </b>" + (coaching === "T" ? "Sì" : "No") + "</div>" +
"<div class=\"col-4 sesso\"><b>Sesso: </b>" + (sesso === "F" ? "Femmina" : "Maschio") + "</div>" +
"</div>" +
"<div class=\"row border-bottom\">" +
"<div class=\"col-6 blurry-text cellulare\"><b>Cellulare: </b>" + cellulare + "</div>" +
"<div class=\"col-6 blurry-text email\"><b>Email: </b>" + email + "</div>" +
"</div>" +
"<div class=\"row descriptionText \">" +
"<div class='col-10 descrizione'>" + descrizione + "</div>" +
"<div class='col-2 align-items-center'><button type='button' class='btn btn-primary btn-large profileButton' data-id='" + id + "'>Profilo</button></div>" +
"</div>" +
"</div>" +
"</div>"
But the script just does nothing for now. Any suggestion?

Currently, you're searching for elements that contain the literal string (scope.value). Use concatenation like so:
$("div:contains('" + scope.value + "')");
Or use a template literal:
$(`div:contains('${scope.value}')`);

$('div:contains(scope.value)')
Should be...
$('div:contains("'+ scope.value +'")')
So the value is appended to the string. Keep in mind if the value can contain double quotes you would have to escape them.

AppenChild dynamic h3 to dynamic div issue

I try to insert a dynamic h3 to a dynamic div, hovewer something is odd as it gets inserted outside the lblUser div. I would also like to be inserted after the "Role" h3.
Here is my code : function showUsers() {
lblUserList.innerHTML = "";
for ( var i = 0; i < ajUserDataFromServer.length; i++ ) {
var lblUser = document.createElement('div');
lblUser.innerHTML = '<div class="lblUser">' + '<img src="' + ajUserDataFromServer[i].image + '" alt="user" class="lblUserImage" data-userImage="' + ajUserDataFromServer[i].image + '">' + '<h3 class="lblUserId">' + 'Id:' + ' ' + ajUserDataFromServer[i].id + '</h3>' + '<h3 class="lblUserRole" data-userRole="' + ajUserDataFromServer[i].role + '">' + 'Role:' + ' ' + ajUserDataFromServer[i].role + '</h3>' + '<h3 class="lblUserName" data-userName="' + ajUserDataFromServer[i].name + '">' + 'Name:' + ' ' + ajUserDataFromServer[i].name + '<h3 class ="lblUserLastName" data-userLastName="' + ajUserDataFromServer[i].lastname + '">' + 'Lastname:' + ' ' + ajUserDataFromServer[i].lastname + '</h3>' + '<h3 class="lblUserPassword" data-userPassword="' + ajUserDataFromServer[i].password + '">' + 'Password:' + ' ' + ajUserDataFromServer[i].password + '</h3>' + '<button id="btnEditUserBody" class="btnShowPage btnEditUser" data-userId="' + ajUserDataFromServer[i].id + '" data-showThisPage="pageUpdateUser">' + 'EDIT USER' + '</button>' + '<button class="btnDeleteUser" data-userId="' + ajUserDataFromServer[i].id + '" >' + 'DELETE USER' + '</button>' + '<h3 class="lblErrorMessage" id="lblDeleteUserErrorMessage">' + '</h3>' + '</div>';
if ( ajUserDataFromServer[i].email ) {
var lblUserEmail = document.createElement('h3');
lblUserEmail.innerHTML = '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';
lblUser.appendChild( lblUserEmail );
}
if ( ajUserDataFromServer[i].phonenumber ) {
var lblUserPhoneNumber = document.createElement('h3');
lblUserPhoneNumber.innerHTML = '<h3 class="lblUserPhoneNumber" data-userPhoneNumber="' + ajUserDataFromServer[i].phonenumber + '">' + 'Phone-number:' + ' ' + ajUserDataFromServer[i].phonenumber + '</h3>';
lblUser.appendChild( lblUserPhoneNumber );
}
lblUserList.appendChild( lblUser );
}
}

I can see a few things wrong with the code, for example:
var lblUserEmail = document.createElement('h3');
lblUserEmail.innerHTML = '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';
Should be something like:
var lblUserEmail = document.createElement('h3');
lblUserEmail.classList.add("lblUserEmail");
lblUserEmail.setAttribute("data-userEmail", ajUserDataFromServer[i].email);
lblUserEmail.innerText = 'Email:' + ' ' + ajUserDataFromServer[i].email;
Now you can append it:
lblUser.appendChild(lblUserEmail);
If you do it your way you wil get nested h3 and div elements.
Furthermore, you need to close your img tag. I can advice creating those tags either in code or with the new es5 string interpolation this will clean up your code and will show you these types of errors.

table pagination in jquery and html

I am trying pagination on the following code. Adding data to the table using JavaScript. Can anyone help me out with how I should go about it?
Any addition or rewrite of the code will be helpful.
function onDeviceReady() {
var queryquery =
var bestbuy = "";
jQuery.getJSON(queryquery, function(resultsbestbuy) {
var productstopdeal = JSON.parse(resultsbestbuy);
bestbuy += "<div class=\"table-container\">" + "<table class=\"table table-filter\">";
for (i = 0; i < productstopdeal.Products.length; i++) {
bestbuy += "<tbody>" + "<tr>" + "<td>" + "<div class=\"ckbox\">" + "<input type=\"checkbox\" id=\"checkbox1\">" + "<label for=\"checkbox1\"></label>" + "</div>" + "</td>" + "<td>" + "" + "<i class=\"glyphicon glyphicon-star\"></i>" + "" + "</td>" + "<td>" + "<div class=\"media\">" + "<a href=";
var pId = urlEncode(productstopdeal.Products[i].Id);
bestbuy += pId;
bestbuy += " class=\"pull-left\">" + "<img src=" + productstopdeal.Products[i].DefaultPictureModel.ImageUrl + " class=\"media-photo\" style=\"height:120px; width:120px;\">" + "</a>" + "<div>" + "<p>" + "<strong><small><strike>MRP: Rs. " + +"/-" + "</strike><br />Offer price: Rs. " + +"/-<br />You save: Rs. " + +"/-</small></strong>" + "</p>" + "</div>" + "<div class=\"media-body\">" + "<p>" + +"</p>" + "</div>" + "<button class=\"btn btn-success\" type=\"button\" id=\"addToCartButton\"><span class=\"glyphicon glyphicon-shopping-cart\"></span> BUY NOW</button>" + "</div>" + "</td>" + "</tr>" + "</tbody>" + "</table>";
}
bestbuy += "</div>";
$('#bestBuy').html(bestbuy);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bestBuy"></div>

Corrected code from what i've understood.
jQuery.getJSON(queryquery, function (resultsbestbuy) {
var bestbuy = "";
var productstopdeal = JSON.parse(resultsbestbuy);
bestbuy += "<div class=\"table-container\">"
+ "<table class=\"table table-filter\"><tbody>";
for (i = 0; i < productstopdeal.Products.length; i++) {
bestbuy += "<tr>"
+ "<td>"
+ "<div class=\"ckbox\">"
+ "<input type=\"checkbox\" id=\"checkbox1\">"
+ "<label for=\"checkbox1\"></label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<a href=\"javascript:;\" class=\"star\">"
+ "<i class=\"glyphicon glyphicon-star\"></i>"
+ "</a>"
+ "</td>"
+ "<td>"
+ "<div class=\"media\">"
+ "<a href='";
var pId = urlEncode(productstopdeal.Products[i].Id);
bestbuy += pId;
bestbuy += "' class=\"pull-left\">"
+ "<img src='" + productstopdeal.Products[i].DefaultPictureModel.ImageUrl + "' class=\"media-photo\" style=\"height:120px; width:120px;\">"
+ "</a>"
+ "<div>"
+ "<p>"
+ "<strong><small><strike>MRP: Rs. " + +"/-"
+ "</strike><br />Offer price: Rs. " + + "/-<br />You save: Rs. " + +"/-</small></strong>"
+ "</p>"
+ "</div>"
+ "<div class=\"media-body\">"
+ "<p>" + + "</p>"
+ "</div>"
+ "<button class=\"btn btn-success\" type=\"button\" id=\"addToCartButton\"><span class=\"glyphicon glyphicon-shopping-cart\"></span> BUY NOW</button>"
+ "</div>"
+ "</td>"
+ "</tr>"
}
bestbuy += "</tbody></table></div>";
$('#bestBuy').html(bestbuy);
});

Slimming down javascript code....Dynamic header on a static page with javascript

This element loads last and with delay on the page...
I've created a dynamic header with an external javascript file for my static html page.
I need help slimming down the code.
Also, to call the function, I call the body onLoad method. Any suggestions on how to call this EXTERNAL function before ALL the contents of the page loads?
function addHeaders(){
var emptyHTML = document.getElementById("category_header").innerHTML;
var addHTML =
"<span>" + emptyHTML + "<a href='/broadcast_webcast/' class='catnav'>" + "Live Broadcasts & Webcasts" + "</a>" + "</span>"
+ "<span>" + "<a href='/business/' class='catnav'>" + "Business" + "</a>" + "</span>"
+ "<span>" + "<a href='/celebrities/' class='catnav'>" + "Celebrities" + "</a>" + "</span>"
+ "<span>" + "<a href='/culture/' class='catnav'>" + "Culture" + "</a>" + "</span>"
+ "<span>" + "<a href='/education/' class='catnav'>" + "Education" + "</a>" + "</span>"
+ "<span>" + "<a href='/energy/' class='catnav'>" + "Energy" + "</a>" + "</span>"
+ "<span>" + "<a href='/entertainment/' class='catnav'>" + "Entertainment" + "</a>" + "</span>"
+ "<span>" + "<a href='/environment/' class='catnav'>" + "Environment" + "</a>" + "</span>"
+ "<span>" + "<a href='/fashion/' class='catnav'>" + "Fashion" + "</a>" + "</span>"
+ "<br>"
+ "<span>" + "<a href='/health/' class='catnav'>" + "Health & Fitness" + "</a>" + "</span>"
+ "<span>" + "<a href='/humanitarian/' class='catnav'>" + "Humanitarian" + "</a>" + "</span>"
+ "<span>" + "<a href='/movies/' class='catnav'>" + "Movies" + "</a>" + "</span>"
+ "<span>" + "<a href='/music/' class='catnav'>" + "Music" + "</a>" + "</span>"
+ "<span>" + "<a href='/hollywood/' class='catnav'>" + "Hollywood" + "</a>" + "</span>"
+ "<span>" + "<a href='/newyork/' class='catnav'>" + "New York City" + "</a>" + "</span>"
+ "<span>" + "<a href='/scienceandtech/' class='catnav'>" + "Science & Technology" + "</a>" + "</span>"
+ "<span>" + "<a href='/sports/' class='catnav'>" + "Sports" + "</a>" + "</span>"
+ "<span>" + "<a href='/videogames/' class='catnav'>"+ "Video Games" + "</a>" + "</span>"
document.getElementById("category_header").innerHTML = addHTML;
var getNav = document.getElementById("navtop").innerHTML;
var createNav =
"<span class='navtop'>" + getNav + "<a href='../' class='navtop'>" + "Home" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/contact-us' class='navtop'>" + "Contact Us" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/our-expertise' class='navtop'>" + "Our Expertise" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/worldwide-studios-offices/' class='navtop'>" + "Bader TV Worldwide Studios & Offices" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/careers' class='navtop'>" + "Careers" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/urgent-video-requests' class='navtop'>" + "Urgent video Requests" + "</a>" + "</span>"
document.getElementById("navtop").innerHTML = createNav;
}
ref: [badertv.com]

Step 1: Reduce Duplication (make a function which makes the span and a tags give a url and text.
Step 2: Use an array and loop for url and text.
function makeLink(url, text){
return "<span><a href='"+url+"' class='catnav'>"+text+"</a></span>";
}
var url = ['/business/','/celebrities/',...];
var text = ['Business','Celebrities',...];
var out = '';
for(var i = 0; i < url.length; i++){
out += makeLink(url[i],text[i]);
}
add any special cases and you're all set.

In both addHTML and createNav you have only one dynamic variable. Why the concatenation?
Addition:
You can just put the whole thing in a function and call it at after you close the parent tag for the element that will hold the content (you can set two function if the two strings are not for the same container).

The slimming down I guess could go like this, it will spare you a few bytes but I wonder if it is worth the effort. For the loading part: calling this in body onload is safe because it probably guarantees that the getElementbyId will work. If you put a script tag near the end of the </body> tag it might work also but on different browser the behavior might be different (aka broken).
function link(linkText) {
return "<span><a href='/" + linkText[0] + "/' class='catnav'>" + linkText[1] + "</a></span>";
}
function addHeaders(){
var emptyHTML = document.getElementById("category_header").innerHTML,
linkTexts = [
["broadcast_webcast", "Live Broadcasts & Webcasts"],
["business", "Business"]
// etc
],
addHtml;
addHtml = new [];
for (i=0;i<linkTexts.length;i += 1) {
addHtml.push(link(linkTexts[i]));
}
document.getElementById("category_header").innerHTML = addHtml.join("");
// rest of the code
}