Inline script rendered as text content

Question

I have DOM objects given as an HTML string and are inserted into an HTML page by AJAX with the jQuery method replaceWith(). The HTML string includes a <div> element and an inline <script> that works on it, and the jQuery command is like the following:

$('#foo').replaceWith('<div>Some Content</div><script>someJavaScriptFunction();</script>');

After this AJAX is executed, the <div> element is rendered correctly, and the script inside the <script> is working, but in addition to that, the content of the inline <script> is rendered verbatim on the page. Why is this happening? How can I avoid this? When I see the corresponding part on Chrome developers tools, the inline script appears only once (which is what I intended).

can you try changing '</script>' to '</scr'+'ipt>'?

Spokey
– Spokey

2013-05-27 09:11:32 +00:00
Commented May 27, 2013 at 9:11 — Spokey
– Spokey, Commented May 27, 2013 at 9:11

Adil · Accepted Answer · 2013-05-27 09:13:01Z

3

You need to escape the / forward slash of closing script tag.

Live Demo

$('#foo').replaceWith('<div>Some Content</div><script>someJavaScriptFunction()<\/script>');

answered May 27, 2013 at 9:13

Adil

148k25 gold badges217 silver badges207 bronze badges

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

Collectives™ on Stack Overflow

Inline script rendered as text content

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related