Injecting arbitrary HTML snippets using JavaScript

Question

I am looking for a way to inject arbitrary html snippets into a DOM node.

The reason I am asking is because I am developing some functionality for retargeting/tracking tags and my advertising partners use different approaches.

Some of them use script tags and they behave differently from other tags.

I have discovered that simply setting the innerHTML property on an arbitrary DOM node to the string <script src="foo"></script> is not going to work. Sure the tag is injected, but the code is not evaluated. I have to create a script node first, then set the src and type attributes and finally inject them.

I am looking for an approach to analyze HTML snippets and automatically and safely detect the correct/optimal way to inject them. I've already got jQuery, but if there are any libraries out there to make this easier, I'm happy to consider them.

How about some code to explain what you'd like to do: "analyze HTML snippet and automatically detect the optimal way to inject" is not very clear. Many browsers prevent you from setting innerHTML to a script tag to prevent XSS. So if by arbitrary, you mean, set it to a script tag, you shouldn't allow that. You should treat setting HTML and scripts differently — Ruan Mendes
– Ruan Mendes, Commented Jun 21, 2014 at 17:32
If you inject a script tag, I think you would expect that code to be run. If browsers do not want you to run external scripts after the page has loaded, it makes little sense why creating a script element and appending it to a node works, while overwriting the innerHTML of the same node does not. I would like to create an API that allows me to inject snippets agnostically of such quirks. — Niels B.
– Niels B., Commented Jun 21, 2014 at 17:38

Harrald Torenvlied · Accepted Answer · 2014-06-21 17:24:52Z

1

Googling for "jQuery html string to elements", gave me: http://api.jquery.com/html/#html2

answered Jun 21, 2014 at 17:24

Harrald Torenvlied

286 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Niels B. Over a year ago

I just tested the method with an external script and it works so far.

Harrald Torenvlied Over a year ago

Well let us now if it does the job :)

Collectives™ on Stack Overflow

Injecting arbitrary HTML snippets using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related