jQuery.html() - The JavaScript code is executed but disappears

Question

I am developing a small editor to add widgets (HTML, CSS and Javascript) to a site.

The user types into a field the widget code.
When validating, the code of the widget is added to the page.
The user can edit the code (which is retrieved from the DOM).

Except that I have a problem to retrieve the javascript code. Indeed, it is well executed, but disappears from the DOM. There is something that escapes me!

I simplified my problem here: HTML code:

<textarea id="code">
    &lt;script type=&quot;text/javascript&quot;&gt;alert(&quot;code&quot;);&lt;/script&gt;
</textarea>
<div id="target"></div>

Javascript code:

$("#target").html($("#code").val());
alert($("#target").html());

Try it out : http://jsfiddle.net/8uhB8/3/

This example insert javascript code (a simple javascript alert) and tries to retrieve it.

Do you have any idea?

Thanks!

This is old, but did you find a solution? I have the same problem. Thanks — cripox
– cripox, Commented Nov 7, 2014 at 18:16
I found the issue on my case, maybe not the same as yours: the js code is executed when a form submit button is clicked, so the page is quickly refreshing after the js code runs. — cripox
– cripox, Commented Nov 7, 2014 at 18:22

Bram Vanroy · Accepted Answer · 2013-05-12 10:07:42Z

2

$("#target").html($("#code").html());
alert($("#target").html());

Fiddle.

Because you are using HTML characters you need to use .html() in this case.

answered May 12, 2013 at 10:07

Bram Vanroy

28.9k29 gold badges151 silver badges266 bronze badges

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

1 Comment

tadaa9 Over a year ago

If you compare your "fiddle" with mine, you will see that there is an important difference: the javascript code is written on the page and not executed. This is not the expected result.

Barmar · Accepted Answer · 2013-05-12 10:14:43Z

2

That's how .html() works. It assigns .innerHTML with all the structural parts of the HTML. But assigning innerHTML doesn't execute scripts. So jQuery pulls all the scripts out of the HTML, and puts them in a <script> node to execute them. This node is only temporary, and is removed by the time .html() completes. But the scripts are still executed.

answered May 12, 2013 at 10:14

Barmar

789k57 gold badges555 silver badges669 bronze badges

6 Comments

tadaa9 Over a year ago

Interesting answer! Do you think it is possible to achieve the expected result by changing my code? Do you have any ideas?

Barmar Over a year ago

Don't try to retrieve the code from the DOM. Put the code in the textarea using .text(), put it in the DOM using .html().

tadaa9 Over a year ago

This is a good solution but it does not apply to my problem. Indeed, in my online web page editor, the textarea is created on the fly to edit the code and then destroyed. There may be multiple widgets on the same page. I'm beginning to think that what I want to do is impossible?

Barmar Over a year ago

It sounds like you're trying to do something like jsfiddle. Why can't you do it similar to the way it works?

tadaa9 Over a year ago

To clarify, I have an online web page editor that takes as input a code (HTML, CSS, Javascript, etc.), this code is processed to be manipulated and edited by the user. In this code, I have title blocks (H1, H2, etc..), text blocks, widgets, etc. Each is editable through a window. I want to allow the user to modify the code of a widget. That it is executed after modification. And I found this code in the html.

|

Collectives™ on Stack Overflow

jQuery.html() - The JavaScript code is executed but disappears

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related