<p>I am currently loading a lightbox style popup that loads it's HTML from an XHR call. This content is then displayed in a 'modal' popup using <code>element.innerHTML = content</code> This works like a charm.</p>

<p>In another section of this website I use a Flickr 'badge' (<a href="http://www.elliotswan.com/2006/08/06/custom-flickr-badge-api-documentation/" rel="noreferrer">http://www.elliotswan.com/2006/08/06/custom-flickr-badge-api-documentation/</a>) to load flickr images dynamically. This is done including a script tag that loads a flickr javascript, which in turn does some <code>document.write</code> statments.</p>

<p>Both of them work perfectly when included in the HTML. Only when loading the flickr badge code <em>inside</em> the lightbox, no content is rendered at all. It seems that using <code>innerHTML</code> to write <code>document.write</code> statements is taking it a step too far, but I cannot find any clue in the javascript implementations (FF2&amp;3, IE6&amp;7) of this behavior.</p>

<p>Can anyone clarify if this should or shouldn't work? Thanks.</p>

[{'answer_id': 54002, 'author': 'Jon Cram', 'author_id': 5343, 'author_profile': 'https://Stackoverflow.com/users/5343', 'pm_score': 0, 'selected': False, 'text': '<p>Can I get some clarification first to make sure I get the problem?</p>\n\n<p><code>document.write</code> calls will add content to the markup at the point in the markup at which they occur. For example if you include <code>document.write</code> calls in a function but call the function elsewhere, the <code>document.write</code> output will happen at the point in the markup the function is <em>defined</em> not where it is <em>called</em>.</p>\n\n<p>Therefore for this to work at all the Flickr <code>document.write</code> statements will need to be part of the <code>content</code> in <code>element.innerHTML = content</code>. Is this definitely the case?</p>\n\n<p>You might quickly test if this should work at all by adding a single and simple <code>document.write</code> call in the content that is set as the <code>innerHTML</code> and see what this does:</p>\n\n<pre><code>&lt;script&gt;\n  var content = "&lt;p&gt;1st para&lt;/p&gt;&lt;script&gt;document.write(\'&lt;p&gt;2nd para&lt;/p&gt;\');&lt;/script&gt;"\n  element.innerHTML = content;\n&lt;/script&gt;\n</code></pre>\n\n<p>If that works, the concept of <code>document.write</code> working in content set as the <code>innerHTML</code> of an element might just work.</p>\n\n<p>My gut feeling is that it won\'t work, but it should be pretty straightforward to test the concept.</p>\n'}, {'answer_id': 54026, 'author': 'Kamiel Wanrooij', 'author_id': 4174, 'author_profile': 'https://Stackoverflow.com/users/4174', 'pm_score': 3, 'selected': False, 'text': '<p>I created a simple test page that illustrates the problem:</p>\n\n<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"\n    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;\n        &lt;title&gt;Document Write Testcase&lt;/title&gt;\n    &lt;/head&gt;\n    &lt;body&gt;\n        &lt;div id="container"&gt;\n        &lt;/div&gt;\n        &lt;div id="container2"&gt;\n        &lt;/div&gt;\n\n        &lt;script&gt;\n            // This doesn\'t work!\n            var container = document.getElementById(\'container\');\n            container.innerHTML = "&lt;script type=\'text/javascript\'&gt;alert(\'foo\');document.write(\'bar\');&lt;\\/script&gt;";\n\n            // This does!\n            var container2 = document.getElementById(\'container2\');\n            var script = document.createElement("script");\n            script.type = \'text/javascript\';\n            script.innerHTML = "alert(\'bar\');document.write(\'foo\');";\n            container.appendChild(script);\n        &lt;/script&gt;\n    &lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n\n<p>This page alerts \'bar\' and prints \'foo\', while I expected it to also alert \'foo\' and print \'bar\'. But, unfortunately, since the <code>script</code> tag is part of a larger HTML page, I cannot single out that tag and append it like the example above. Well, I can, but that would require scanning <code>innerHTML</code> content for <code>script</code> tags, and replacing them in the string by placeholders, and then inserting them using the DOM. Sounds not <em>that</em> trivial.</p>\n'}, {'answer_id': 54079, 'author': 'Jon Cram', 'author_id': 5343, 'author_profile': 'https://Stackoverflow.com/users/5343', 'pm_score': 0, 'selected': False, 'text': "<p>So you're using a DOM method to create a <code>script</code> element and append that to an existing element and this then causes the content of the appended <code>script</code> element to execute? That sounds good.</p>\n\n<p>You say that the script tag is part of a larger HTML page and therefore cannot be singled out. Can you not give the script tag an ID and target it? I'm probably missing something obvious here.</p>\n"}, {'answer_id': 54110, 'author': 'Kamiel Wanrooij', 'author_id': 4174, 'author_profile': 'https://Stackoverflow.com/users/4174', 'pm_score': 0, 'selected': False, 'text': '<p>In theory, yes, I can single out a script tag that way. The problem is that we potentially have dozens of situations where this occurs, so I am trying to find some cause or documentation of this behavior.</p>\n\n<p>Also, the <code>script</code> tag does not seem to be a part of the DOM anymore after it gets loaded. In our environment, my <code>container</code> div remains empty, so I cannot fetch the <code>script</code> tag. It should work, though, because in my example above the script does not get executed, but is still part of the DOM.</p>\n'}, {'answer_id': 54114, 'author': 'Mo.', 'author_id': 5560, 'author_profile': 'https://Stackoverflow.com/users/5560', 'pm_score': 1, 'selected': False, 'text': '<p><code>document.write</code> is about as deprecated as they come. Thanks to the wonders of JavaScript, though, you can just assign your own function to the <code>write</code> method of the <code>document</code> object which uses <code>innerHTML</code> on an element of your choosing to append the supplied content.</p>\n'}, {'answer_id': 1863308, 'author': 'noah', 'author_id': 12034, 'author_profile': 'https://Stackoverflow.com/users/12034', 'pm_score': 5, 'selected': True, 'text': '<p>In general, script tags aren\'t executed when using innerHTML. In your case, this is good, because the <code>document.write</code> call would wipe out everything that\'s already in the page. However, that leaves you without whatever HTML document.write was supposed to add.</p>\n\n<p>jQuery\'s HTML manipulation methods will execute scripts in HTML for you, the trick is then capturing the calls to <code>document.write</code> and getting the HTML in the proper place. If it\'s simple enough, then something like this will do:</p>\n\n<pre><code>var content = \'\';\ndocument.write = function(s) {\n    content += s;\n};\n// execute the script\n$(\'#foo\').html(markupWithScriptInIt);\n$(\'#foo .whereverTheDocumentWriteContentGoes\').html(content);\n</code></pre>\n\n<p>It gets complicated though. If the script is on another domain, it will be loaded asynchronously, so you\'ll have to wait until it\'s done to get the content. Also, what if it just writes the HTML into the middle of the fragment without a wrapper element that you can easily select? <a href="http://github.com/iamnoah/writeCapture" rel="noreferrer">writeCapture.js</a>  (full disclosure: I wrote it) handles all of these problems. I\'d recommend just using it, but at the very least you can look at the code to see how it handles everything.</p>\n\n<p>EDIT: Here is a <a href="http://iamnoah.github.com/writeCapture/lbFlickrDemo.html" rel="noreferrer">page</a> demonstrating what sounds like the effect you want.</p>\n'}, {'answer_id': 7175202, 'author': 'David Refoua', 'author_id': 1454514, 'author_profile': 'https://Stackoverflow.com/users/1454514', 'pm_score': 2, 'selected': False, 'text': '<p>Use <code>document.writeln(content);</code> instead of <code>document.write(content)</code>.</p>\n\n<p>However, the better method is using the concatenation of <code>innerHTML</code>, like this:</p>\n\n<pre class="lang-js prettyprint-override"><code>element.innerHTML += content;\n</code></pre>\n\n<p>The <code>element.innerHTML = content;</code> method will replace the old content with the new one, which will overwrite your element\'s innerHTML!</p>\n\n<p>Whereas using the the <code>+=</code> operator in <code>element.innerHTML += content</code> will append your text after the old content. (similar to what <code>document.write</code> does.)</p>\n'}]
['https://Stackoverflow.com/questions/53945', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4174/']