Appending script to HTML via JS

Question

I am trying to add run an external script that basically appends HTML elements to the page. I can't just use a script tag as I need it to run asynchronously, however when I use <script async src="..."> the script appends the elements to the bottom of the page, rather than the class that it's being called in.

Therefor I've created this script to append the external script tag to the page.

var x = document.createElement("SCRIPT");
x.src = '//rss.bloople.net/?url=https%3A%2F%2Fwww.coindesk.com%2Ffeed%2F&limit=5&showicon=true&type=js';

var newsContainer = document.createElement("div");
newsContainer.className = "newsContainer";
newsContainer.innerHTML = x;

document.getElementById("newsContainerId").appendChild(newsContainer);

This doesn't work however, as it appends this to the page

[object HTMLScriptElement]

what does your HTML look like ? is your `newsContainerId ` at the bottom of the page ? — MayK, May 04 '18 at 12:56
This script is inside the `newsContainerId` I'll try it at the bottom — Matt Ward, May 04 '18 at 12:58
According to this [question](https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml) scripts cannot be inserted with innerHTML. — vbriand, May 04 '18 at 13:00

Mamun · Accepted Answer · 2018-05-04T13:32:08.433

0

Change newsContainer.innerHTML = x;

To

newsContainer.appendChild(x);

var x = document.createElement("SCRIPT");
x.src = '//rss.bloople.net/?url=https%3A%2F%2Fwww.coindesk.com%2Ffeed%2F&limit=5&showicon=true&type=js';

var newsContainer = document.createElement("div");
newsContainer.className = "newsContainer";
newsContainer.appendChild(x);
document.getElementById("newsContainerId").appendChild(newsContainer);


//

<div id="newsContainerId">Container</div>

edited May 04 '18 at 13:32

answered May 04 '18 at 13:00

Mamun

66,969
9
47
59

1

Although this adds it to the page, it still has the same issue that it adds it to the bottom, rather than into the `newsContainerId` – Matt Ward May 04 '18 at 13:03
"There is no innerHTML in newsContainer yet." is factually untrue and - although your proposed fix is correct - not the reason that text rather than a ` – steenbergh May 04 '18 at 13:30

steenbergh · Answer 2 · 2018-05-04T13:31:27.057

0

The issue occurs here:

newsContainer.innerHTML = x;

xis evaluated - which you can't really do on this object. You should use x.innerHTML do make it do what you'd expect. Just x by itself is described by JavaScript as [object HTMLScriptElement] and that is what gets added to your newsContainer.

Try skipping this shoving around in the first place and add the element x to newscontainer:

var x = document.createElement("SCRIPT");
x.src = '//rss.bloople.net/?url=https%3A%2F%2Fwww.coindesk.com%2Ffeed%2F&limit=5&showicon=true&type=js';

var newsContainer = document.createElement("div");
newsContainer.className = "newsContainer";
newsContainer.appendChild(x);
document.getElementById("newsContainerId").appendChild(newsContainer);

edited May 04 '18 at 13:31

answered May 04 '18 at 13:01

steenbergh

1,642
3
22
40

1

Thanks! Although this gets me half way there, it is still adding the content to the bottom of the page, rather than in my `newsContainer` class – Matt Ward May 04 '18 at 13:07
@MattWard How do you mean '`newscontainer` class'? You can't add things to a class... This script should add a DIV to (the end of) 'newsContainerId`, and that DIV holds the script. If the script has `document.write` instructions or somesuch, those are added tot the bottom of the page, not the DIV. – steenbergh May 04 '18 at 13:28

Appending script to HTML via JS

2 Answers2