Question

I have a javascript link that references another .js file. I’ve been trying to output an image (for testing purposes), but I’m not sure what is the correct way to go about this.

    alert("beginning");
    //var link = $("<a href='http://juixe.com'>Hello, <b>World</b>!</a>");
    //$('body').append(link);
    //document.write("hi");
    //document.write("<div><img src='http://s3-media2.ak.yelpcdn.com/bphoto/xqC6Iy5mOLb_8mwMKGv8_w/l.jpg' /></div>");
    alert("before function");
(function(){



    alert("middle");
    var links = $("<a href='http://juixe.com'>Hello, <b>World</b>!</a>");
    $('body').append(links);
    alert("after middle");
    //alert($("img").attr("id"));
    document.write("hi");
    document.write("<div><img src='http://s3-media2.ak.yelpcdn.com/bphoto/xqC6Iy5mOLb_8mwMKGv8_w/l.jpg' /></div>");

    alert("end");
}());

I was able to alert beginning, all the way to middle. It seems like var links doesn’t work. I’m trying to use HTML inside this .js file. Essentially, I want to be able to do some modal window, but I’m trying to output images for testing purposes right now.

Also, is this the correct way for jquery?

Thanks in advance!

Answer 1

Your code is a strange mix. Jquery code almost always needs to run after the page has loaded whereas document.write can never be used after the page has loaded.

You are incorrectly wrapping your jQuery in an immediate executing function. The proper wrap for jQuery is within :

$(document).ready(function(){
  /* html of page exists now, run jQuery here */
});// notice no extra "()" after close brace as you have

or the shorthand version that does same thing:

$(function(){
  /*html of page exists now, run jQuery here */
});// notice no extra "()" after close brace  as you have

If you change all of your document.write to $('body').append(/* your content*/) and place all your code inside the above wrappers you will have much better success.

There is a wealth of information within the jQuery documentation and API. A good start point with more detail about the wrapping I’ve shown can be found here: http://docs.jquery.com/How_jQuery_Works