Still trying to get my head around the same Javascript problem. I tried the DOM (my first idea, actually, but I didn't want to have an extra div to use as a hook):

function flickr_badge(){
var target = document.getElementById('photos_hook');
if(!target) return;
var div = document.createElement('div');
div.setAttribute('id','photos_wrapper');
var div2 = document.createElement('div');
div2.setAttribute('id','photos');
var js_s = "<script type='text/javascript' src='http://www.flickr.com/badge_code_v2.gne?...'></script>";
div2.appendChild(js_s);
div.appendChild(div2);
target.appendChild(div);
}

and using innerHTML :

function flickr_badge(){
var target = document.getElementById('photos_hook');
if(!target) return;
var div = document.createElement('div');
div.setAttribute('id','photos_wrapper');
var div2 = document.createElement('div');
div2.setAttribute('id','photos');
var js_s = "<script type='text/javascript' src='http://www.flickr.com/badge_code_v2.gne?...'></script>";
div2.innerHTML = js_s;
div.appendChild(div2);
target.appendChild(div);
}

with the same result: the Javascript call to Flickr takes over and rewrites the whole page, I get only unstyled photos and a loopy request to connect with flickr...

I also tried embedding the Javascirpt directly in the page :

<script type="text/javascript">
document.write('<div id="photos_wrapper">');
document.write('<div id="photos">');
document.write('<scr'+'ipt type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?...."></scr'+'ipt>');
document.write('</div>');
document.write('</div>');
</script>


I had to break the <script> tag in two pieces, otherwise I get a Javascript unterminated string error (script tag nested inside another one), it works but it doesn't validate. Basically, so far, most of my possible solutions don't work and what works doesn't validate.