jquery - using javascript to output html - Stack Overflow

admin管理员组

文章数量:1415664

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=''>Hello, <b>World</b>!</a>");
    //$('body').append(link);
    //document.write("hi");
    //document.write("<div><img src='.jpg' /></div>");
    alert("before function");
(function(){



    alert("middle");
    var links = $("<a href=''>Hello, <b>World</b>!</a>");
    $('body').append(links);
    alert("after middle");
    //alert($("img").attr("id"));
    document.write("hi");
    document.write("<div><img src='.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!

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



    alert("middle");
    var links = $("<a href='http://juixe.'>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./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!

• javascript
• jquery
• html
• function
• bookmarklet

Share Improve this question Follow edited Jun 24, 2012 at 0:41 hellomello asked Jun 24, 2012 at 0:28 hellomellohellomello 8,6074242 gold badges154154 silver badges310310 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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./How_jQuery_Works

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.'>Hello, <b>World</b>!</a>";
$('body').append(links);

or simply:

$('body').append("<a href='http://juixe.'>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.

本文标签： jqueryusing javascript to output htmlStack Overflow