CODEWITHSUNDEEP
javascriptjqueryhtmlfunctionbookmarklet
hellomello
hellomello

Reputation: 8587

using javascript to output html

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!

Upvotes: 1

Views: 9449

Answers (2)

marteljn
marteljn

Reputation: 6516

Your biggest problem is addressed in the other answer. You are improperly wrapping JQUery so essentially JQuery is not ready to be executed when it reaches your append statement.

It is unnecessary to wrap your html in a JQuery object (in this case):

var links = "<a href='http://juixe.com'>Hello, <b>World</b>!</a>";
$('body').append(links);

or simply:

$('body').append("<a href='http://juixe.com'>Hello, <b>World</b>!</a>");

In terms of best practice, using append, appendTo or prepend are good options depending on the context. You could also use:

$("body").html("/*Your HTML here*/")

At the end of the day you have many options but avoid document.write at all cost. The non-JQuery approach would be to use .innerHTML with a DOM element. This is also a good approach in the absence of JQuery.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

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

Upvotes: 2

Related Questions