Copy (e.g. with load or find) with jQuery an HTML Markup with included Inline Script - How to realize?

Question

Hey Stack'er

I want to crop a part of an HTML markup with Inline-JavaScript included.

Example:

<div id="foo">
   <div id="bar">
      <script>
         ..some function..
      </script>
      <p>...</p>
   </div>
</div>

With the jQuery functions find() and load() you are not able to copy the whole markup WITH the JS-Snippet includet. The result looks like:

<div id="foo">
   <div id="bar">
      <p>...</p>
   </div>
</div>

The Script is stripped off. In the jQuery Community they say its supposed to be like this, because of risk of Script Injection.

But how is it possible anyway to realize this?

Best wishes chris

Answer 1

I don't know how you would select it out, but you could insert it into the dom by splitting the <scri and pt> tags

Answer 2

http://forum.jquery.com/topic/jquery-removing-script-tags-from-html-string-when-using-html

Is a good thread on this.

I guess you could always use innerHTML which I believe returns the script.

Answer 3

It's not to do with script injection at html()-reading time, it's to do with browser inconsistencies about what happens when you write <script> into innerHTML, at html(value)-writing time.

This is heavily unreliable across browsers, which is why jQuery attempts to pull the scripts out and execute them separately, avoiding writing them to the document since that has unpredictable after-effects.

You should avoid dealing with script element nodes or HTML markup with <script> in. What is it you are trying to do here?