Using a String as HTML

Question

I've been trying to create a news box for my website today and I have a problem. Let me explain what happens. I create a 2d array that contains the news (date and the news). I then loop through it to construct the news_string and then use that for the DIV's innerHTML. I have put a very simple version of it below

for (var i = 0; i < news.length; i++) 
{
news_string.concat(news[i][1],"<br>");
}

document.getElementById("news-content").innerHTML = news_string;

However nothing appears. I have cut it down to the very minimal. No result. I have used alerts. Nothing appears. The news_string is blank regardless of the fact I put data into it. And even if I do gain a string nothing appears in the DIV box. What's causing this massive break?

However if I do this. news_string = news_string + news[i][1] + "
"; alert(news_string) The string completely appears — Jeremy Beare, Feb 16 '14 at 11:14
@JeremyBeare: Strings are immutable in JavaScript. `news_string.concat` returns a new string, so the code in your loop isn't really changing anything. — Blender, Feb 16 '14 at 11:15
What about using `news_string = news_string.concat(news[i][1],"
");` ? — Sergio, Feb 16 '14 at 11:16
Alright, so the string is now fixed. It shows up in the alerts. But it still won't appear in the innerHTML (Thanks for the info regarding concat) — Jeremy Beare, Feb 16 '14 at 11:17
It not should be like `res = news_string.concat(news[i][1],"
");`? and findally `res` should append as `innerHTML` — Suman Bogati, Feb 16 '14 at 11:22

score 1 · Accepted Answer · answered Feb 16 '14 at 11:16

1

The concat method returns a value, you have no variable assignement there to catch it...

From the docs (notice the bold part):

The concat() method combines the text of two or more strings and returns a new string.

So you should use:

news_string = news_string.concat(news[i][1],"<br>");

answered Feb 16 '14 at 11:16

Sergio

28,539
11
85
132

Oh, pfft, how did I not notice that? – Niet the Dark Absol Feb 16 '14 at 11:20
Or just `news.map(function(thing) { return thing[1]; }).join('
')`. – Blender Feb 16 '14 at 11:23
Makes perfect sense. Can't believe I made that error. So the string now has values. However the problem still persists that the innerHTML is blank. This is the code I pass into the innerHTML document.getElementById("news-content").innerHTML = news_string; – Jeremy Beare Feb 16 '14 at 11:23
@JeremyBeare, please post a sample of the array. – Sergio Feb 16 '14 at 11:24
news[0][0] = new Date(2012,12,14); news[0][1] = "This is a test string"; news[1][0] = new Date(2012,12,27); news[1][1] = "And so is this!"; – Jeremy Beare Feb 16 '14 at 11:25
@JeremyBeare, you are defining your array in a strange/wrong way. Is that really your code? Check this: http://jsfiddle.net/exzgc/ – Sergio Feb 16 '14 at 11:29
It is for testing purposes. I dumbed it down to the real basics. Now this is interesting. I may have found the problem. I did an alert on the news-content div and it didn't even give an alert. So I did it on another piece and its HTML appeared. This made me think at the time of using the function, the news-content div doesn't exist.

So now I have moved the trigger of the function to the div
And it won't load now. Posting the source now (See below) – Jeremy Beare Feb 16 '14 at 11:36
[Main Script](http://www.thelegenaseries.com/main_script.js) [When the Page is loaded (see "news-bar" div)](http://www.thelegenaseries.com/main_script.js) [News Box](http://www.thelegenaseries.com/news_box.html) – Jeremy Beare Feb 16 '14 at 11:38
@JeremyBeare `onload` is not made for div at all – Suman Bogati Feb 16 '14 at 11:45
@JeremyBeare, you cannot add onload to a div... Check here: http://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div – Sergio Feb 16 '14 at 11:46
Based on the fact that the loadNews() function has no parameters. How should I proceed? – Jeremy Beare Feb 16 '14 at 11:48
@JeremyBeare, here is a idea. A second parameter, that is ignored if not there. Put it in the sucess function you have, after the innerHTML part. Example: __http://jsfiddle.net/JEcV4/1/__ – Sergio Feb 16 '14 at 11:56
Well now the function is triggered. All I need to do is get the function to wait until the content-canvas innerHTML has been loaded. [See loadPage()] (http://www.thelegenaseries.com/main_script.js). Any ideas? (And thanks everyone for the help. I'd have never guessed all this had a play into it breaking) – Jeremy Beare Feb 16 '14 at 11:59
@JeremyBeare, the `func && func();` part should be the line after this one: `document.getElementById("content-canvas").innerHTML = xmlhttp.responseText;` – Sergio Feb 16 '14 at 12:14
I did that and the last part of the func won't occur. And as well as that, the page won't load either. [See Script](www.thelegenaseries.com/main_script.js) alert(document.getElementById("news-content").innerHTML); – Jeremy Beare Feb 16 '14 at 12:19
@JeremyBeare, it works for me now(!): http://www.thelegenaseries.com/ - do a refresh and it should work for you also. – Sergio Feb 16 '14 at 12:22
@JeremyBeare, now you commented the important line(!)... I see `//document.getElementById("news-content").innerHTML = news_string;` in your code. Remove the `//` – Sergio Feb 16 '14 at 12:27
1

@JeremyBeare, in the inline javascript remove the `()`. refer just to the function `loadNews` in the parameter without the `()`. I missleaded you in my fast example before sorry. Check here: __http://jsfiddle.net/C7nh3/__ – Sergio Feb 16 '14 at 12:37

Using a String as HTML

1 Answers1