I’d put them in a different structure, perhaps, depending on what you want to achieve.
If it’s just this list that you want: Remove all line breaks and tabs, lead all quotation marks with a backslash (\") and put that complete one line of code in:
targetElement.innerHTML = "your Code here";
More flexible:
var newsSources = [
{
“id”:“washington_post”,
“name”:“Washington Post”,
“alt”:“Washington Post”,
“link”:“https://www.washingtonpost.com/?reload=true”
},
{
“id”:“usa_today”,
“name”:“USA Today”,
“alt”:“USA Today”,
“link”:“http://rssfeeds.usatoday.com/UsatodaycomNation-TopStories”
},
{
“id”:“irish_news”,
“name”:“Irish News”,
“alt”:“Irish News”,
“link”:“http://www.irishnews.com/news/worldnews/”
},
{
“id”:“wall_street_journal”,
“name”:“Wall St. Journal”,
“alt”:“Wall St. Journal”,
“link”:“https://www.wsj.com/news/us”
},
{
“id”:“kansas_city_star”,
“name”:“The Kansas City Star”,
“alt”:“Kansas City, MO News”,
“link”:“https://www.kansascity.com/news/”
},
{
“id”:“bbc_news”,
“name”:“BBC World News”,
“alt”:“BBC World News”,
“link”:“https://www.bbc.com/news/world”
}
];
newMainElement = document.createElement(“div”);
newMainHeadline = document.createElement(“h2”);
newMainHeadline.innerHTML = “< img src="pix/break_news.png" alt="Breaking News" />”;
newMainElement.apply(newMainHeadline);
frstWrapper = document.createElement(“div”);
scndWrapper = document.createElement(“div”); // really neccessary?
thrdWrapper = document.createElement(“div”); // really neccessary?
newsList = document.createElement(“ul”);
for (i=0; i< =newsSources.length; i++) {
newsItem = document.createElement(“li”);
newsLogo = document.createElement(“div”);
newsLogo.innerHTML = “< img src="pix"+newsSources[i].id+”.png" alt="“+newsSources[i].alt+”" />"
newsLink = document.createElement(“h3”);
newsLink.innerHTML = “< a href="”+newsSources[i].link+“" target="myIframe">”+newsSources[i].name+“”;
newsItem.apply(newsLogo);
newsItem.apply(newsLink);
newsList.apply(newsItem);
}
thrdWrapper.apply(newsList); // really neccessary? see above
scndWrapper.apply(thrdWrapper); // really neccessary? see above
frstWrapper.apply(scndWrapper);
newMainElement.apply(frstWrapper);
I didn’t use the code block because it can’t handle \".
In < img and < a you have to remove the space.
id = image name, you’ll have to adapt a little, I wrote them in a more uniform style.
alt = could be the same as the name, but I put it in as you varied a little with your alt titles.
Oh, by the way:
Seems like this could also be a good case for a template system.
https://forum.magicmirror.builders/topic/2443/html-templating-system
https://forum.magicmirror.builders/topic/5053/better-way-to-use-html-in-module-development
Offline
