JQuery $(document).ready() and document.write()

Question

Firstly, is there a way to use document.write() inside of JQuery's $(document).ready() method? If there is, please clue me in because that will resolve my issue.

Otherwise, I have someone's code that I'm supposed to make work with mine. The catch is that I am not allowed to alter his code in any way. The part that doesn't work looks something like this:

document.write('<script src=\"http://myurl.com/page.aspx?id=1\"&gt;&lt;/script&gt;');

The script tag is referencing an aspx page that does a series of tests and then spits out something like so:

document.write('<img src=\"/image/1.jpg\" alt=\"Second image for id 1\">')

The scripts are just examples of what is actually going on. The problem here is that I've got a document.write() in the initial script and a document.write() in the script that get's appended to the first script and I've got to somehow make this work within JQuery's $(document).ready() function, without changing his code.

I have no idea what to do. Help?

Answer 1

jQuery has a ready substitute for document.write. All you need to use is the append method.

   jQuery('<img src=""/>').appendTo('body');

This is fairly self-evident. But briefly, you can replace the with whatever html you want. And the tag name in the appendTo method is the name of the tag you want to append your html to. That's it.

Answer 2

With the requirements given, no, you can't use document.write without really hosing up the document. If you're really bent on not changing the code, you can override the functionality of document.write() like so and tack on the result later:

var phbRequirement = "";

$(function() {
  document.write = function(evil) {
    phbRequirement += evil;
  }
  document.write("Haha, you can't change my code!");
  $('body').append(phbRequirement);

});

Make sure you overwrite the document.write function before it is used. You can do it at anytime.

The other answers are boring, this is fun, but very pretty much doing it the wrong way for the sake of fulfilling the requirements given.

Answer 3

picardo's answer works, but this is more intuitive for me:

$("body").append('<img src=\"/image/1.jpg\" alt=\"Second image for id 1\">');

Also, for the script part that is being inserted with document.write(), check out jQuery's getScript() function

Answer 4

picardo has the approach I would've used. To expand on the concept, take a read:

$('<script/>')
   .attr('src', 'http://myurl.com/page.aspx?id=1')
   .appendTo('body');

Alternate style:

var imgnode = $('<img alt="Second image for id 1"/>')
   .attr('src', "image1.jpg");

$('#id1').append(imgnode);

Be sure to use the attr method to set any dynamic attributes. No need to escape special symbols that way.

Also, I'm not sure what the effectiveness of dynamically generating script tags; I never tried it. Though, it's expected that they contain or reference client-side script. My assumption is that what page.aspx will return. Your question is a little vague about what you're trying to do there.