We Keep Coding

JavaScript Appending Rather Than Overwriting Using InnerHTML Property

So this is a weird one as every topic I've found on the subject has the exact opposite of my problem.
I'm using some JavaScript in SharePoint Online to replace the innerHTML of some elements, but whenever the function runs it is appending content rather than overwriting it.
I've tried the JS method of setting the innerHTML to something else first, then to the value (no luck), and also moving it to a jQuery call to set it. In both cases it does the same thing. Same problem observed on both Edge and Chrome.
Code is below - any ideas? (Have not included the whole script, just the specific function as it's quite a big script and the other bits are working as expected).
function getThisCompany() {
thisCompanyEnum = thisCompany.getEnumerator();
while (thisCompanyEnum.moveNext()) {
var currentCompany = thisCompanyEnum.get_current();
var thisCompanyId = currentCompany.get_item('ID');
var thisCompanyName = currentCompany.get_item('companyName');
var thisCompanyPhone = currentCompany.get_item('companyPhone');
var thisCompanyUrl = currentCompany.get_item('companyUrl');
var thisCompanyLogo = currentCompany.get_item('companyLogo');
// Check for a null value - if it is null console throws an error and stops the script, so load a default logo
if (thisCompanyLogo == null) {
thisCompanyLogo = "https://consiliumuk.sharepoint.com/POC/minicrm/CRM%20Images/nologo.png";
}
else {
thisCompanyLogo = thisCompanyLogo.get_url();
}
var thisCompanyAddress = currentCompany.get_item('companyAddress');
var thisCompanyMarkupBlock = "<table><tr><td colspan=2><b>";
thisCompanyMarkupBlock += thisCompanyName;
thisCompanyMarkupBlock += "</b></td></tr><tr><td colspan=1 valign=top><img height=100 width=100 src='";
thisCompanyMarkupBlock += thisCompanyLogo;
thisCompanyMarkupBlock += "' /></td><td colspan=1 valign=top>";
thisCompanyMarkupBlock += thisCompanyAddress;
thisCompanyMarkupBlock += "<p /><i>";
thisCompanyMarkupBlock += thisCompanyPhone;
thisCompanyMarkupBlock += "</i><br /><a href=";
thisCompanyMarkupBlock += thisCompanyUrl;
thisCompanyMarkupBlock += ">Visit company website</a></td></tr></table><p /><input id='loadExtended' type='button' value='Load' onClick='loadExtendedDetails(";
thisCompanyMarkupBlock += thisCompanyId;
thisCompanyMarkupBlock += ");' />";
alert(thisCompanyMarkupBlock);
//document.getElementById('detailsSpace').innerHTML = "Loading...";
//document.getElementById('detailsSpace').innerHTML = thisCompanyMarkupBlock;
jQuery("#detailsSpace").html(thisCompanyMarkupBlock);
}
}

Instead of using .html(), you can use clear and append, yo ensure your container is empty, something like:
jQuery("#detailsSpace").empty(); // Before while
while ([...]){
[...]
jQuery("#detailSpace").append(thisCompanyMarkupBlock); // Instead of html()
}

Found the problem - there was another function where because of a loop it was keeping the previous set of returned HTML when it got reprocessed. The jquery.empty() function was put in at the right place along with declaring the string null again, fixed now.

Dynamically add array contents as new elements - JQuery

edit: Problem solved! I was modifying the page before it was loaded so the script didn't actually do anything. I fixed it now and it works. Thanks for the help, I'll have to chalk this one up to being new to jQuery and it's weirdness.
Long story short I'm trying to make a webpage that dynamically takes Article titles, thumbnail images, descriptions, and links to them, and creates a nicely formatted list on the page. I'm trying to accomplish this in jQuery and HTML5.
Here is the sample data that I'll be using to dynamically populate the page. For now formatting isn't important as I can do that later after it works at all.
<script>
var newsTitles = ["If It Ain't Broke, Fix It Anyways"];
var newsPics = ["images/thumbnail_small.png"];
var newsDescs = ["August 14th 2015<br/><b>If It Ain't Broke</b><br/>Author: Gill Yurick<br/><br/> Sometimes, a solution isn't the only one. So how do we justify changes to systems that don't need to be fixed or changed? I explore various systems from other successful card games and how their approaches to issues (be they successes or failures in the eyes of the deisgners) can help us create EC."];
var newsLinks = ["it_aint_broke-gill_popson.html"];
var newsIndex = 0;
var newsMax = 1;
The section of code where I'm trying to use the contents of the arrays above to dynamically fill elements.
<td style="height:500px;width:480px;background-color:#FFF7D7;padding:20px" colspan=2 id="article">
<h1>Articles</h1>
<!-- the column for each news peice add an element with the thumbnail, the title and teh desc -->
<script>
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href="" newsLinks[i] + "">" + newsTitles[i] + "</h3>", "<img src=""newsPics[i] + "">","<p>" + newsDesc[i] + "</p>", ); $("div").append("hello");
}
</script>
<div id="articleList">
HELLO
</div>
</td>
Here is what it ends up looking like, I can post more info if needed as I am aware this may not be clear enough to fully explain my problem but I am unable to determine that. Thank you in advance.

try this
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href=""+ newsLinks[i] + "">" + newsTitles[i] + "</h3>, <img src=""+newsPics[i] + "">, <p>" + newsDescs[i] + "</p>" ); $("div").append("hello");
}
Concatation issue + typo for newsDescs

The following string is invalid html and is missing a +
"<h3 href="" newsLinks[i] + "">"
You need to use proper quotes for html attributes, not &quote;
Try
"<h3 href='" + newsLinks[i] + "'>"
OR
"<h3 href=\"" + newsLinks[i] + "\">" // `\` used to escape same type quote
Personally I prefer opening/closing html strings with single quotes but either will work
Note tht you should be getting a syntax error thrown in dev tools console which would have helped you locate problems

for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href='" + newsLinks[i] + "'>" + newsTitles[i] + "</h3>");
$("#articleList").append("<img src='" + newsPics[i] + "'>","<p>" + newsDesc[i] + "</p>" );
}

Simple Javascript For Loop in Meteor

I'm assuming I putting this in the wrong area or making some other flaw due to my lack of understand as I'm still learning Meteor.
I have a Meteor application working with data, etc. and all is well on that front. I have a number of logos created for this application that I want to share with some others to get feedback on which they prefer.
All the logo files are named logo1.png, logo2.png, logo3.png, etc. It's the perfect time for a quick and easy for loop (because I know how many files I have) that just concatenates the loop variable onto the word logo and then the .png.
So on my local computer I throw up an HTML file with the following that works exactly how I need it to.
<script type="text/JavaScript">
for (i = 1; i < 7; i++) {
logoName = '';
logoName += "logo" + i + ".png"
document.write ("<img src=" + logoName + " height=200px>");
}
</script>
Then I put into my Meteor main.html file:
<body>
{{> header}}
<script type="text/JavaScript">
for (i = 1; i < 7; i++) {
logoName = '';
logoName += "logo" + i + ".png"
document.write ("<img src=" + logoName + " height=200px>");
}
</script>
<div class="text-center">
{{> invList}}
</div>
</body>
The problem is my Meteor application is catching that "<" in the "i < 7" statement and expects there to be a tag.
So I get the following error:
While building the application: client/main.html:10: Expected tag name
after < ..."> for (i = 1; i < 7; i++) {
...
I'm probably missing something here about where code needs to be placed or something but I've gone through Meteor docs, DiscoverMeteor, and done some Googling in addition to checking this site and I just haven't found how to make Meteor ignore this bit of javascript so it doesn't catch that less than sign and expect anything.
Should I just put this code in /public somehow? If so I'm not sure how I would call it from main.html so it places the images where I want them.

As you already know, you shouldn't write to HTML like that. Instead, put your loop in a helper.
HTML:
<body>
{{> images}}
</body>
<template name="images">
{{#each logos}}
<img src="{{url}}" class="logo"/>
{{/each}}
</template>
JS:
Template.images.logos = function() {
return _.map(_.range(1, 7), function(idx) {
return {url: 'logo' + idx + '.png'};
});
};
CSS:
.logo {
height: 200px;
}

I don't think that it's a good idea to embed a script in the html when you are using Meteor. If you still want to do so, remember to escape some symbols. To correct your script, use following instead:
<script type="text/JavaScript">
for (i = 1; i < 7; i++) {
logoName = '';
logoName += "logo" + i + ".png"
document.write ("<img src=" + logoName + " height=200px>");
}
</script>

How do I get these HTML tags to render from javascript

Noob question alert! So, I've got this script, which loops through an array and adds a <br> tag to the end of each array item. But i dont know the proper way of displaying this output on my page. Currently, when it loads the <br> tags show up on screen, whereas I want them to render as line-breaks. It is outputting into a <textarea> if that makes a difference. Thanks a bunch.
var outputLinkText = document.getElementById('outputLinkText');
var outputStageOne = "";
for (var i = 0; i < arrayOne.length; i++) {
outputStageOne += (arrayOne[i] + "<br>");
}
if ( 'textContent' in timePlace ) {
outputLinkText.textContent = outputStageOne;
}
else {
outputLinkText.innerText = outputStageOne;
}

<textarea> tags don't support <br> tags (or any other HTML tags) within their contents. They only hold plain text.
You need to add "\n" as the separator instead.
(Strictly, it should be "\r\n" but a "\n" on its own is usually sufficient)

Yes the textarea is a difference, try this :
"\r\n" instead of "<br>"

Uncaught SyntaxError: Unexpected identifier with .append() string

I keep getting this error in the $('#savetickets-list') line. I want to dynamically add fields to a table, the table has the id in HTML.
<div class="savetickets-list">
</div>
In javascript I fill the table in a for loop
for (var i = 0; i < len; i++) {
// the data comes from a web database
var ticketname = results.rows.item(i).iTicketName;
$('#savetickets-list').append('
<div class="saveticket gradient-top">
<h3>' + ticketname + '</h3>
</div>
');
}
I dont know how to solve this. jQuery is loaded, I also checked the name of the selector.
Please help.

$('#savetickets-list').append('\
<div class="saveticket gradient-top">\
<h3>' + ticketname + '</h3>\
</div>\
');
when you want to write multiline strings in JS, you must escape new lines.

It is because you are using new lines.
JS does not automatically read new lines for you. It treats them as new statements.
The way I prefer to do this is like:
$('#savetickets-list').append('<div class="saveticket gradient-top">'+
'<h3>' + ticketname + '</h3>'+
'</div>');

Just checked.
The problem is in the newlines, you have to concatenate strings or put all the statement in a single line.